修改小程序及大屏

2025-10-23 17:26:47 +08:00
parent 212dffd0da
commit 07bd3ce5da
90 changed files with 3348 additions and 3554 deletions
--- a/government-mini-program/pages/index/index.json
+++ b/government-mini-program/pages/index/index.json
@@ -3,3 +3,4 @@
  "navigationBarTitleText": "首页",
  "navigationStyle": "custom"
 }
+
--- a/government-mini-program/pages/index/index.wxml
+++ b/government-mini-program/pages/index/index.wxml
@@ -1,21 +1,18 @@
 <!--pages/index/index.wxml-->
-<view class="container">
-  <!-- 顶部导航栏 -->
-  <view class="nav-bar">
-    <view class="nav-title">首页</view>
-    <view class="nav-actions">
-      <view class="nav-icon">⋯</view>
-      <view class="nav-icon">—</view>
-      <view class="nav-icon">⊙</view>
+<view class="home-container">
+  <!-- 标题栏 -->
+  <view class="header">
+    <view class="header-left">
+      <text class="title">首页</text>
+    </view>
+    <view class="header-right">
+      <!-- 可以在这里添加右侧操作按钮 -->
    </view>
  </view>

  <!-- 智能硬件设备区域 -->
-  <view class="section">
-    <view class="section-header">
-      <view class="section-indicator"></view>
-      <text class="section-title">智能硬件设备</text>
-    </view>
+  <view class="section card">
+    <view class="section-title">智能硬件设备</view>
    <view class="hardware-grid">
      <view 
        class="hardware-item" 
@@ -32,12 +29,9 @@
    </view>
  </view>

-  <!-- 其它功能区域 -->
-  <view class="section">
-    <view class="section-header">
-      <view class="section-indicator"></view>
-      <text class="section-title">其它</text>
-    </view>
+  <!-- 快捷功能区域 -->
+  <view class="section card">
+    <view class="section-title">快捷功能</view>
    <view class="other-grid">
      <view 
        class="other-item" 
@@ -53,20 +47,6 @@
      </view>
    </view>
  </view>
-</view>

-<!-- 底部标签栏 -->
-<view class="tab-bar">
-  <view class="tab-item active">
-    <image class="tab-icon" src="/images/home-active.png" mode="aspectFit"/>
-    <text class="tab-text">首页</text>
-  </view>
-  <view class="tab-item">
-    <image class="tab-icon" src="/images/farmers.png" mode="aspectFit"/>
-    <text class="tab-text">养殖户</text>
-  </view>
-  <view class="tab-item">
-    <image class="tab-icon" src="/images/profile.png" mode="aspectFit"/>
-    <text class="tab-text">我的</text>
-  </view>
+
 </view>
--- a/government-mini-program/pages/index/index.wxss
+++ b/government-mini-program/pages/index/index.wxss
@@ -1,80 +1,73 @@
 /* pages/index/index.wxss */
-.container {
+.home-container {
  min-height: 100vh;
-  background: #f5f5f5;
-  padding-bottom: 120rpx; /* 为底部标签栏留出空间 */
+  background: linear-gradient(180deg, #f8fffe 0%, #f0f9ff 100%);
+  padding-bottom: 120rpx;
 }

-/* 顶部导航栏 */
-.nav-bar {
-  background: linear-gradient(135deg, #7CB342 0%, #8BC34A 100%);
-  height: 88rpx;
+/* 标题栏 */
+.header {
+  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
+  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
-  padding: 0 30rpx;
-  color: white;
+  box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.15);
 }

-.nav-title {
-  font-size: 32rpx;
-  font-weight: 500;
-}
-
-.nav-actions {
+.header-left {
  display: flex;
  align-items: center;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 44rpx;
-  padding: 8rpx 16rpx;
+  gap: 20rpx;
 }

-.nav-icon {
-  font-size: 24rpx;
-  margin: 0 8rpx;
-  width: 24rpx;
-  height: 24rpx;
+.title {
+  color: #ffffff;
+  font-size: 36rpx;
+  font-weight: 600;
+}
+
+.header-right {
  display: flex;
  align-items: center;
-  justify-content: center;
 }

 /* 区域样式 */
 .section {
-  background: white;
-  margin: 20rpx 0;
-  border-radius: 0;
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  padding: 24rpx 30rpx;
-  background: #f8f8f8;
-  border-bottom: 1rpx solid #e8e8e8;
-}
-
-.section-indicator {
-  width: 6rpx;
-  height: 28rpx;
-  background: #2c5aa0;
-  margin-right: 16rpx;
-  border-radius: 3rpx;
+  margin: 25rpx 30rpx;
+  background: #ffffff;
+  border-radius: 20rpx;
+  padding: 35rpx 30rpx;
+  box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.08);
+  border: 1rpx solid rgba(76, 175, 80, 0.1);
 }

 .section-title {
-  font-size: 28rpx;
-  font-weight: 500;
-  color: #333;
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #2c3e50;
+  margin-bottom: 35rpx;
+  position: relative;
+  padding-left: 20rpx;
+}
+
+.section-title::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 6rpx;
+  height: 28rpx;
+  background: linear-gradient(135deg, #4CAF50, #45a049);
+  border-radius: 3rpx;
 }

 /* 智能硬件设备网格 */
 .hardware-grid {
  display: flex;
-  flex-wrap: nowrap;
-  padding: 30rpx 20rpx;
-  background: white;
  justify-content: space-between;
+  gap: 25rpx;
 }

 .hardware-item {
@@ -82,67 +75,118 @@
  display: flex;
  flex-direction: column;
  align-items: center;
-  margin: 0 10rpx;
+  padding: 25rpx 15rpx;
+  border-radius: 16rpx;
+  background: linear-gradient(145deg, #f8f9fa, #ffffff);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.hardware-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(76, 175, 80, 0.05), rgba(69, 160, 73, 0.05));
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.hardware-item:active::before {
+  opacity: 1;
 }

 .hardware-icon {
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 50%;
+  width: 110rpx;
+  height: 110rpx;
+  border-radius: 55rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
-}
-
-.icon-image {
-  width: 60rpx;
-  height: 60rpx;
+  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.12);
+  position: relative;
+  z-index: 2;
 }

 .hardware-name {
-  font-size: 26rpx;
-  color: #333;
+  font-size: 28rpx;
+  color: #2c3e50;
  text-align: center;
-  line-height: 1.3;
-  font-weight: 500;
+  line-height: 1.4;
+  font-weight: 600;
+  position: relative;
+  z-index: 2;
+}
+
+.icon-image {
+  width: 56rpx;
+  height: 56rpx;
 }

 /* 其它功能网格 */
 .other-grid {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 30rpx;
-  background: white;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 35rpx 25rpx;
 }

 .other-item {
-  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
-  margin-bottom: 40rpx;
+  padding: 25rpx 15rpx;
+  border-radius: 16rpx;
+  background: linear-gradient(145deg, #f8f9fa, #ffffff);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.other-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, rgba(76, 175, 80, 0.05), rgba(69, 160, 73, 0.05));
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.other-item:active::before {
+  opacity: 1;
 }

 .other-icon {
-  width: 100rpx;
-  height: 100rpx;
-  border-radius: 50%;
+  width: 88rpx;
+  height: 88rpx;
+  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
-  margin-bottom: 16rpx;
+  margin-bottom: 18rpx;
+  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
+  position: relative;
+  z-index: 2;
 }

 .other-name {
-  font-size: 24rpx;
-  color: #333;
+  font-size: 26rpx;
+  color: #2c3e50;
  text-align: center;
-  line-height: 1.2;
-  word-break: break-all;
+  line-height: 1.3;
+  font-weight: 600;
+  position: relative;
+  z-index: 2;
 }

+
+
 .icon-image {
  width: 60rpx;
  height: 60rpx;