Commit 578c137389fe73182e18ceddedc997fc8736b9c0
1 parent
24c0bbe7
样式优化
Showing
4 changed files
with
106 additions
and
88 deletions
pages-sub/data/tree-archive/treeRecord.vue
| 1 | 1 | <template> |
| 2 | - <view class="container"> | |
| 2 | + <view class="page-container"> | |
| 3 | 3 | |
| 4 | 4 | <!-- 内容区域 - 集成z-paging分页 --> |
| 5 | 5 | <z-paging |
| ... | ... | @@ -12,50 +12,52 @@ |
| 12 | 12 | <template #empty> |
| 13 | 13 | <empty-view/> |
| 14 | 14 | </template> |
| 15 | - <!-- 空数据组件 --> | |
| 16 | -<!-- <up-empty v-if="rows.length === 0" text="暂无数据" marginTop="100"></up-empty>--> | |
| 17 | - | |
| 18 | - <!-- 树木列表：up-card重构 + 保留原始背景图写法 核心满足你的要求 --> | |
| 19 | - <view class="record-wrap" > | |
| 20 | - <up-card | |
| 21 | - v-for="i in rows" | |
| 22 | - :key="i.treenumber" | |
| 23 | - :border="false" | |
| 24 | - :show-head="false" | |
| 25 | - class="tree-card" | |
| 26 | - :foot-border-top="false" | |
| 27 | - @click="toEditPage(i.id)" | |
| 28 | - > | |
| 29 | - <template #body> | |
| 30 | - <view class="card-body-inner"> | |
| 31 | - <view class="record-list-left" :style="`background-image: url(${i.treephoto});`"></view> | |
| 32 | - | |
| 33 | - <view class="record-list-right"> | |
| 34 | - <view class="up-flex up-flex-items-center up-flex-between"> | |
| 35 | - <view class="u-line-1 treetypeName">{{ i.treetype }}</view> | |
| 36 | - <view style="text-align: right">{{ timeFormat(i.updatetime) }}</view> | |
| 37 | - </view> | |
| 38 | - <view class="up-flex up-flex-items-center" style="margin: 8px 0"> | |
| 39 | - <img src="../../../static/imgs/tree/tree-high.png" style="width: 12px;height: 12px;margin-right: 6px;" alt=""> 高度：{{ i.treeheight }} 米 | |
| 40 | - </view> | |
| 41 | - <view class="up-flex up-flex-items-center"> | |
| 42 | - <img src="../../../static/imgs/tree/treearound.png" style="width: 12px;height: 12px;margin-right: 6px;" alt="">胸径：{{ i.dbh }} 厘米 | |
| 15 | + <!-- 空数据组件 --> | |
| 16 | + <!-- <up-empty v-if="rows.length === 0" text="暂无数据" marginTop="100"></up-empty>--> | |
| 17 | + | |
| 18 | + <!-- 树木列表：up-card重构 + 保留原始背景图写法 核心满足你的要求 --> | |
| 19 | + <view class="record-wrap"> | |
| 20 | + <up-card | |
| 21 | + v-for="i in rows" | |
| 22 | + :key="i.treenumber" | |
| 23 | + :border="false" | |
| 24 | + :show-head="false" | |
| 25 | + class="tree-card" | |
| 26 | + :foot-border-top="false" | |
| 27 | + @click="toEditPage(i.id)" | |
| 28 | + > | |
| 29 | + <template #body> | |
| 30 | + <view class="card-body-inner"> | |
| 31 | + <view class="record-list-left" :style="`background-image: url(${i.treephoto});`"></view> | |
| 32 | + | |
| 33 | + <view class="record-list-right"> | |
| 34 | + <view class="up-flex up-flex-items-center up-flex-between"> | |
| 35 | + <view class="u-line-1 treetypeName">{{ i.treetype }}</view> | |
| 36 | + <view style="text-align: right">{{ timeFormat(i.updatetime) }}</view> | |
| 37 | + </view> | |
| 38 | + <view class="up-flex up-flex-items-center" style="margin: 8px 0"> | |
| 39 | + <img src="../../../static/imgs/tree/tree-high.png" style="width: 12px;height: 12px;margin-right: 6px;" | |
| 40 | + alt=""> 高度：{{ i.treeheight }} 米 | |
| 41 | + </view> | |
| 42 | + <view class="up-flex up-flex-items-center"> | |
| 43 | + <img src="../../../static/imgs/tree/treearound.png" | |
| 44 | + style="width: 12px;height: 12px;margin-right: 6px;" alt="">胸径：{{ i.dbh }} 厘米 | |
| 45 | + </view> | |
| 43 | 46 | </view> |
| 44 | 47 | </view> |
| 45 | - </view> | |
| 46 | - <view class="treenumber-no"> | |
| 47 | - 树木编号：{{ i.treenumber }} | |
| 48 | - </view> | |
| 49 | - </template> | |
| 50 | - </up-card> | |
| 51 | - </view> | |
| 48 | + <view class="treenumber-no"> | |
| 49 | + 树木编号：{{ i.treenumber }} | |
| 50 | + </view> | |
| 51 | + </template> | |
| 52 | + </up-card> | |
| 53 | + </view> | |
| 52 | 54 | </z-paging> |
| 53 | 55 | <!-- 底部新增按钮 --> |
| 54 | 56 | <view class="fixed-bottom-btn-wrap"> |
| 55 | 57 | <up-button |
| 56 | 58 | type="primary" |
| 57 | 59 | @click="toAddTreePage" |
| 58 | - v-show="count > 0 && count > rows.length" | |
| 60 | + v-show="count > 0 && count > allCount" | |
| 59 | 61 | > |
| 60 | 62 | 新增树木录入 |
| 61 | 63 | </up-button> |
| ... | ... | @@ -65,8 +67,8 @@ |
| 65 | 67 | </template> |
| 66 | 68 | |
| 67 | 69 | <script setup> |
| 68 | -import { ref} from 'vue' | |
| 69 | -import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'; | |
| 70 | +import { ref } from 'vue' | |
| 71 | +import { onLoad, onShow, onUnload } from '@dcloudio/uni-app'; | |
| 70 | 72 | onUnload(() => { |
| 71 | 73 | // 关闭所有页面，直接打开【行道树档案】主页面 【微信小程序完美兼容，无任何报错】 |
| 72 | 74 | uni.reLaunch({ |
| ... | ... | @@ -75,40 +77,34 @@ onUnload(() => { |
| 75 | 77 | }) |
| 76 | 78 | import { treeRoadReq } from "@/api/tree-archive/tree-archive.js"; |
| 77 | 79 | import { timeFormat } from '@/uni_modules/uview-plus'; |
| 78 | - | |
| 79 | 80 | const rows = ref([]) |
| 80 | 81 | const roadId = ref('') |
| 81 | 82 | const count = ref(0) |
| 82 | - | |
| 83 | +const allCount = ref(0) | |
| 83 | 84 | onLoad((options) => { |
| 84 | 85 | console.log(options) |
| 85 | 86 | roadId.value = options.roadId |
| 86 | 87 | count.value = options.count |
| 87 | 88 | }) |
| 88 | - | |
| 89 | 89 | onShow(() => { |
| 90 | 90 | // 初始化分页数据 |
| 91 | 91 | pagingRef.value?.reload() |
| 92 | 92 | }) |
| 93 | - | |
| 94 | - | |
| 95 | - | |
| 96 | 93 | const toEditPage = (id) => { |
| 97 | 94 | uni.navigateTo({ |
| 98 | 95 | url: `/pages-sub/data/tree-archive/editTree?id=${id}` |
| 99 | 96 | }) |
| 100 | 97 | } |
| 101 | - | |
| 102 | 98 | const toAddTreePage = () => { |
| 103 | 99 | uni.navigateTo({ |
| 104 | 100 | url: `/pages-sub/data/tree-archive/addTree?roadId=${roadId.value}` |
| 105 | 101 | }) |
| 106 | 102 | } |
| 107 | - | |
| 108 | 103 | const pagingRef = ref(null) // z-paging实例 |
| 109 | 104 | const fetchData = async (pageNo, pageSize) => { |
| 110 | - const res = await treeRoadReq( {road: roadId.value,pageNo, pageSize}) | |
| 105 | + const res = await treeRoadReq({road: roadId.value, pageNo, pageSize}) | |
| 111 | 106 | console.log(res) |
| 107 | + allCount.value = res.total | |
| 112 | 108 | // rows.value = res.list |
| 113 | 109 | pagingRef.value?.complete(res?.list || [], res?.total) |
| 114 | 110 | } |
| ... | ... | @@ -116,11 +112,12 @@ const fetchData = async (pageNo, pageSize) => { |
| 116 | 112 | |
| 117 | 113 | <style scoped lang="scss"> |
| 118 | 114 | // ✅ 你的原始样式 一行没删、一行没改、全部保留 |
| 119 | -.container { | |
| 115 | +.page-container { | |
| 120 | 116 | min-height: 100vh; |
| 121 | 117 | } |
| 118 | + | |
| 122 | 119 | .record-wrap { |
| 123 | - padding-bottom: 60px; | |
| 120 | + padding-bottom: 20px; | |
| 124 | 121 | } |
| 125 | 122 | |
| 126 | 123 | .record-list-wrap { |
| ... | ... | @@ -141,7 +138,7 @@ const fetchData = async (pageNo, pageSize) => { |
| 141 | 138 | width: 70px; |
| 142 | 139 | background-size: 100% 100%; |
| 143 | 140 | background-repeat: no-repeat; // 新增：防止图片平铺 |
| 144 | - background-position: center; // 新增：图片居中显示 | |
| 141 | + background-position: center; // 新增：图片居中显示 | |
| 145 | 142 | } |
| 146 | 143 | |
| 147 | 144 | .record-list-right { |
| ... | ... | @@ -167,7 +164,8 @@ const fetchData = async (pageNo, pageSize) => { |
| 167 | 164 | //box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04); |
| 168 | 165 | //background: #fff; |
| 169 | 166 | } |
| 170 | -.card-body-inner{ | |
| 167 | + | |
| 168 | +.card-body-inner { | |
| 171 | 169 | display: flex; |
| 172 | 170 | font-size: 12px; |
| 173 | 171 | } | ... | ... |
pages/index/index.vue
| ... | ... | @@ -10,7 +10,7 @@ |
| 10 | 10 | </view> |
| 11 | 11 | <view class="msg-icon" @click="handleMsgClick" hover-class="msg-icon--hover"> |
| 12 | 12 | <up-icon name="chat" color="#fff" size="24"/> |
| 13 | - <view class="msg-badge" > | |
| 13 | + <view class="msg-badge"> | |
| 14 | 14 | <up-badge type="error" showZero="true" max="999" :value="msgCount"></up-badge> |
| 15 | 15 | </view> |
| 16 | 16 | </view> |
| ... | ... | @@ -52,13 +52,18 @@ |
| 52 | 52 | <!-- 使用up-tabs组件实现Tab切换 --> |
| 53 | 53 | <up-tabs |
| 54 | 54 | :list="tabList" |
| 55 | - active-color="#0A86F4" | |
| 56 | - inactive-color="#666" | |
| 57 | - font-size="14px" | |
| 58 | 55 | lineWidth="60" |
| 59 | 56 | @change="handleTabChange" |
| 60 | 57 | class="task-tab-container" |
| 61 | 58 | :scrollable="false" |
| 59 | + :activeStyle="{ | |
| 60 | + color: '#000000', | |
| 61 | + fontSize: '14' | |
| 62 | + }" | |
| 63 | + :inactiveStyle="{ | |
| 64 | + color: '#787070', | |
| 65 | + fontSize: '14' | |
| 66 | + }" | |
| 62 | 67 | ></up-tabs> |
| 63 | 68 | |
| 64 | 69 | <!-- z-paging分页列表 --> |
| ... | ... | @@ -71,7 +76,7 @@ |
| 71 | 76 | use-page-scroll |
| 72 | 77 | > |
| 73 | 78 | <template #empty> |
| 74 | - <up-empty /> | |
| 79 | + <up-empty/> | |
| 75 | 80 | </template> |
| 76 | 81 | <view class="task-list-container"> |
| 77 | 82 | <view |
| ... | ... | @@ -87,8 +92,8 @@ |
| 87 | 92 | </view> |
| 88 | 93 | <view class="task-item__footer u-flex common-item-center common-justify-between" |
| 89 | 94 | style="font-size: 13px; margin-top: 5px;"> |
| 90 | - <view class="urgency-tag" > | |
| 91 | - 紧急程度： {{ item.pressingType||'--' }} | |
| 95 | + <view class="urgency-tag"> | |
| 96 | + 紧急程度： {{ uni.$dict.getDictLabel('workorder_pressing_type', item.pressingType) || '--' }} | |
| 92 | 97 | </view> |
| 93 | 98 | <view style="font-size: 13px;color: #333">{{ |
| 94 | 99 | timeFormat(item.busiDateTime, 'yyyy-mm-dd hh:MM:ss') |
| ... | ... | @@ -392,7 +397,7 @@ $border-color: #e5e5e5; // 新增边框颜色变量 |
| 392 | 397 | .msg-icon { |
| 393 | 398 | position: relative; |
| 394 | 399 | padding: 5px; |
| 395 | - top:10px; | |
| 400 | + top: 10px; | |
| 396 | 401 | border-radius: 50%; |
| 397 | 402 | |
| 398 | 403 | &--hover { |
| ... | ... | @@ -401,8 +406,8 @@ $border-color: #e5e5e5; // 新增边框颜色变量 |
| 401 | 406 | |
| 402 | 407 | .msg-badge { |
| 403 | 408 | position: absolute; |
| 404 | - top: -5px; | |
| 405 | - right: -5px; | |
| 409 | + top: -2px; | |
| 410 | + right: -3px; | |
| 406 | 411 | } |
| 407 | 412 | } |
| 408 | 413 | } |
| ... | ... | @@ -419,7 +424,7 @@ $border-color: #e5e5e5; // 新增边框颜色变量 |
| 419 | 424 | |
| 420 | 425 | .module-title { |
| 421 | 426 | padding: $spacing-lg; |
| 422 | - font-size: 15px; | |
| 427 | + font-size: 14px; | |
| 423 | 428 | font-weight: 600; |
| 424 | 429 | color: $text-color-light; |
| 425 | 430 | } |
| ... | ... | @@ -475,6 +480,7 @@ $border-color: #e5e5e5; // 新增边框颜色变量 |
| 475 | 480 | padding: $spacing-md; |
| 476 | 481 | transition: background-color 0.2s; |
| 477 | 482 | border-bottom: 1px solid $border-color; |
| 483 | + | |
| 478 | 484 | &:last-child { |
| 479 | 485 | border-bottom: none; |
| 480 | 486 | } | ... | ... |
pages/login/index.vue
| ... | ... | @@ -11,12 +11,18 @@ |
| 11 | 11 | <!-- uview-plus的Tabs组件 --> |
| 12 | 12 | <up-tabs |
| 13 | 13 | :list="tabList" |
| 14 | - active-color="#0A86F4" | |
| 15 | - inactive-color="#666" | |
| 16 | - font-size="16px" | |
| 17 | - line-width="40" | |
| 18 | - line-height="3" | |
| 14 | + line-width="55" | |
| 15 | + line-height="2" | |
| 19 | 16 | @change="handleTabChange" |
| 17 | + :activeStyle="{ | |
| 18 | + color: '#3c9cff', | |
| 19 | + fontWeight:'500', | |
| 20 | + fontSize: '14' | |
| 21 | + }" | |
| 22 | + :inactiveStyle="{ | |
| 23 | + color: '#606060', | |
| 24 | + fontSize: '14' | |
| 25 | + }" | |
| 20 | 26 | ></up-tabs> |
| 21 | 27 | |
| 22 | 28 | <!-- 表单校验容器 --> |
| ... | ... | @@ -34,10 +40,12 @@ |
| 34 | 40 | clearable |
| 35 | 41 | maxlength="11" |
| 36 | 42 | input-align="left" |
| 37 | - fontSize="16px" | |
| 43 | + fontSize="14px" | |
| 38 | 44 | :disabled="isLoading" |
| 39 | 45 | shape="circle" |
| 40 | 46 | placeholder="请输入手机号" |
| 47 | + selectionStart="10" | |
| 48 | + selectionEnd="10" | |
| 41 | 49 | @blur="() => loginFormRef.validateField('mobile')" |
| 42 | 50 | /> |
| 43 | 51 | </up-form-item> |
| ... | ... | @@ -50,7 +58,7 @@ |
| 50 | 58 | clearable |
| 51 | 59 | maxlength="30" |
| 52 | 60 | input-align="left" |
| 53 | - fontSize="16px" | |
| 61 | + fontSize="14px" | |
| 54 | 62 | :disabled="isLoading" |
| 55 | 63 | shape="circle" |
| 56 | 64 | placeholder="请输入账户" |
| ... | ... | @@ -83,6 +91,10 @@ |
| 83 | 91 | :customStyle="{marginBottom: '8px'}" |
| 84 | 92 | label="记住密码" |
| 85 | 93 | name="agree" |
| 94 | + size="14" | |
| 95 | + iconSize="14" | |
| 96 | + labelSize="14" | |
| 97 | + labelColor="'#3F3F3F'" | |
| 86 | 98 | usedAlone |
| 87 | 99 | v-model:checked="rememberPwd" |
| 88 | 100 | > |
| ... | ... | @@ -331,17 +343,15 @@ onMounted(() => { |
| 331 | 343 | z-index: 1; |
| 332 | 344 | |
| 333 | 345 | .welcome-text { |
| 334 | - font-size: 23px; | |
| 346 | + font-size: 20px; | |
| 335 | 347 | display: block; |
| 336 | 348 | margin-bottom: 10px; |
| 337 | - font-weight: 500; | |
| 338 | 349 | } |
| 339 | 350 | |
| 340 | 351 | .platform-name { |
| 341 | 352 | margin-bottom: 10px; |
| 342 | - font-size: 23px; | |
| 353 | + font-size: 20px; | |
| 343 | 354 | display: block; |
| 344 | - opacity: 0.95; | |
| 345 | 355 | } |
| 346 | 356 | } |
| 347 | 357 | |
| ... | ... | @@ -398,7 +408,7 @@ onMounted(() => { |
| 398 | 408 | height: 44px; |
| 399 | 409 | line-height: 44px; |
| 400 | 410 | border-radius: 4px; |
| 401 | - font-size: 16px; | |
| 411 | + font-size: 18px; | |
| 402 | 412 | background: #0A86F4; |
| 403 | 413 | box-shadow: 0px 4px 6px 1px rgba(25,94,215,0.5); |
| 404 | 414 | border-radius: 23px; | ... | ... |
pages/workbench/index.vue
| ... | ... | @@ -10,7 +10,7 @@ |
| 10 | 10 | |
| 11 | 11 | <!-- 蓝色装饰块 --> |
| 12 | 12 | <view class="blue-decor-block" v-show="!loading"> |
| 13 | - <text class="welcome-text u-line-1">你好{{userInfo?.user?.nickname || ''}}，欢迎登录</text> | |
| 13 | + <text class="welcome-text u-line-1">你好{{ userInfo?.user?.nickname || '' }}，欢迎登录</text> | |
| 14 | 14 | <text class="platform-name">全域智能运营管理平台</text> |
| 15 | 15 | </view> |
| 16 | 16 | |
| ... | ... | @@ -25,9 +25,13 @@ |
| 25 | 25 | <!-- 菜单卡片列表：仅渲染有子节点的父模块 --> |
| 26 | 26 | <view class="menu-card-wrap"> |
| 27 | 27 | <up-card |
| 28 | - :title-size="18" | |
| 28 | + :title-size="14" | |
| 29 | + :titleColor="'#000'" | |
| 29 | 30 | :border="false" |
| 30 | 31 | :shadow="true" |
| 32 | + :head-style="{ | |
| 33 | + fontWeight:'500' | |
| 34 | + }" | |
| 31 | 35 | :foot-border-top="false" |
| 32 | 36 | v-for="(parentModule, index) in filteredModuleList" |
| 33 | 37 | :key="`$parentModule.id_${index}`" |
| ... | ... | @@ -45,8 +49,8 @@ |
| 45 | 49 | <u-image |
| 46 | 50 | :src="listItem.icon" |
| 47 | 51 | mode="aspectFit" |
| 48 | - width="40px" | |
| 49 | - height="40px" | |
| 52 | + width="48px" | |
| 53 | + height="48px" | |
| 50 | 54 | lazy-load |
| 51 | 55 | radius="8px" |
| 52 | 56 | class="block-icon" |
| ... | ... | @@ -62,9 +66,9 @@ |
| 62 | 66 | </template> |
| 63 | 67 | |
| 64 | 68 | <script setup lang="ts"> |
| 65 | -import { ref, computed } from 'vue'; | |
| 66 | -import { onShow } from '@dcloudio/uni-app'; | |
| 67 | -import { useUserStore } from '@/pinia/user'; | |
| 69 | +import {ref, computed} from 'vue'; | |
| 70 | +import {onShow} from '@dcloudio/uni-app'; | |
| 71 | +import {useUserStore} from '@/pinia/user'; | |
| 68 | 72 | import globalConfig from '@/common/config/global'; |
| 69 | 73 | import cache from '@/common/utils/cache'; |
| 70 | 74 | |
| ... | ... | @@ -114,13 +118,13 @@ onShow(async () => { |
| 114 | 118 | |
| 115 | 119 | // 未登录处理：跳转登录页，阻止后续逻辑执行 |
| 116 | 120 | if (!isLogin()) { |
| 117 | - uni.showToast({ title: '请先登录', icon: 'none', duration: 1500 }); | |
| 121 | + uni.showToast({title: '请先登录', icon: 'none', duration: 1500}); | |
| 118 | 122 | setTimeout(() => { |
| 119 | 123 | uni.reLaunch({ |
| 120 | 124 | url: '/pages/login/index', |
| 121 | 125 | fail: (err) => { |
| 122 | 126 | console.error('跳转登录页失败：', err); |
| 123 | - uni.showToast({ title: '跳转登录页异常', icon: 'none' }); | |
| 127 | + uni.showToast({title: '跳转登录页异常', icon: 'none'}); | |
| 124 | 128 | } |
| 125 | 129 | }); |
| 126 | 130 | }, 1500); |
| ... | ... | @@ -142,14 +146,14 @@ onShow(async () => { |
| 142 | 146 | |
| 143 | 147 | const handleMenuClick = (item: MenuItem) => { |
| 144 | 148 | if (!item.jumpUrl) { |
| 145 | - uni.showToast({ title: '暂无跳转链接', icon: 'none', duration: 2000 }); | |
| 149 | + uni.showToast({title: '暂无跳转链接', icon: 'none', duration: 2000}); | |
| 146 | 150 | return; |
| 147 | 151 | } |
| 148 | 152 | uni.navigateTo({ |
| 149 | 153 | url: item.jumpUrl, |
| 150 | 154 | fail: (err) => { |
| 151 | 155 | console.error('页面跳转失败：', err); |
| 152 | - uni.showToast({ title: '页面路径错误', icon: 'none', duration: 2000 }); | |
| 156 | + uni.showToast({title: '页面路径错误', icon: 'none', duration: 2000}); | |
| 153 | 157 | } |
| 154 | 158 | }); |
| 155 | 159 | }; |
| ... | ... | @@ -170,7 +174,7 @@ const handleMenuClick = (item: MenuItem) => { |
| 170 | 174 | background: url("https://img.jichengshanshui.com.cn:28207/appimg/bg.jpg") no-repeat; |
| 171 | 175 | background-size: 100% 100%; |
| 172 | 176 | z-index: 1; |
| 173 | - color:#fff; | |
| 177 | + color: #fff; | |
| 174 | 178 | text-align: left; |
| 175 | 179 | |
| 176 | 180 | .welcome-text { |
| ... | ... | @@ -236,7 +240,7 @@ const handleMenuClick = (item: MenuItem) => { |
| 236 | 240 | |
| 237 | 241 | .grid-text { |
| 238 | 242 | font-size: 13px; |
| 239 | - color: #333; | |
| 243 | + color: #1C1C1C; | |
| 240 | 244 | text-align: center; |
| 241 | 245 | margin-top: 5px; |
| 242 | 246 | display: block; | ... | ... |