Browse Source

feat:首页优化样式

master
zhaobing’ 1 year ago
parent
commit
bc980c0875
  1. 72
      weapp/pages/home/home.wxml
  2. 54
      weapp/pages/home/home.wxss

72
weapp/pages/home/home.wxml

@ -20,42 +20,58 @@
<!--最近7天统计--> <!--最近7天统计-->
<text>最近7天统计</text> <text>最近7天统计</text>
<view class="card2"> <view class="card2">
<view class="image-container"> <view class="image-container">
<image src="/images/sevenDays.png" class="background-image"></image> <image src="/images/sevenDays.png" class="background-image"></image>
<view class="overlay-content"> <view class="overlay-content">
<image src="/images/check.png" style="width:36px;height:36px;margin-right: 10px;" /> <image src="/images/check.png" style="width:36px;height:36px;margin-right: 10px;" />
<view> <view>
<view>巡检次数</view> <view class="count">巡检次数</view>
<view><text class="fontStyle">{{sevenDaysCount}}</text>次</view> <view><text class="fontStyle">{{sevenDaysCount}}</text>次</view>
</view>
</view> </view>
</view> </view>
<view style="display: flex; justify-content: space-around;">
<view class="flex" style="padding-left:10px ;">
<view style="margin:10px 0px;" class="only">发现问题个数</view>
<view style="margin:10px 0px;"><text class="fontStyle">{{sevenDaysQuestionCount}}</text></view>
<view style="margin:10px 0px;" class="only">个</view>
</view>
<view class="flex">
<view style="margin:10px 0px;" class="only">问题处理个数</view>
<view style="margin:10px 0px;"><text class="fontStyle">{{sevenDaysHandleCount}}</text></view>
<view style="margin:10px 0px;" class="only">个</view>
</view>
</view>
</view> </view>
<view style="display: flex; justify-content: space-around;">
<view style="margin:10px 0px;">发现问题个数</view>
<view style="margin:10px 0px;"><text class="fontStyle">{{sevenDaysQuestionCount}}</text>个</view>
<view style="margin:10px 0px;">问题处理个数</view>
<view style="margin:10px 0px;"><text class="fontStyle">{{sevenDaysHandleCount}}</text>个</view>
</view>
</view>
<!--总巡巡检统计--> <!--总巡巡检统计-->
<text>总巡检统计</text> <text>总巡检统计</text>
<view class="card2"> <view class="card2">
<view class="image-container"> <view class="image-container">
<image src="/images/xunjian.png" class="background-image"></image> <image src="/images/xunjian.png" class="background-image"></image>
<view class="overlay-content"> <view class="overlay-content">
<image src="/images/check.png" style="width:36px;height:36px;margin-right: 10px;" /> <image src="/images/check.png" style="width:36px;height:36px;margin-right: 10px;" />
<view> <view>
<view>巡检次数</view> <view class="count">巡检次数</view>
<view><text class="fontStyle">{{allCount}}</text>次</view> <view><text class="fontStyle">{{allCount}}</text>次</view>
</view>
</view> </view>
</view> </view>
<view style="display: flex; justify-content: space-around;">
<view class="flex">
<view style="margin:10px 0px;" class="only">发现问题个数</view>
<view style="margin:10px 0px;"><text class="fontStyle">{{allQuestionCount}}</text></view>
<view style="margin:10px 0px;" class="only"> 个</view>
</view>
<view class="flex">
<view style="margin:10px 0px;" class="only">问题处理个数</view>
<view style="margin:10px 0px;"><text class="fontStyle">{{allHandleCount}}</text></view>
<view style="margin:10px 0px;" class="only"> 个</view>
</view>
</view>
</view> </view>
<view style="display: flex; justify-content: space-around;">
<view style="margin:10px 0px;">发现问题个数</view>
<view style="margin:10px 0px;"><text class="fontStyle">{{allQuestionCount}}</text>个</view>
<view style="margin:10px 0px;">问题处理个数</view>
<view style="margin:10px 0px;"><text class="fontStyle">{{allHandleCount}}</text>个</view>
</view>
</view>
</view> </view>

54
weapp/pages/home/home.wxss

@ -6,6 +6,7 @@
color: #333333; color: #333333;
letter-spacing: 0; letter-spacing: 0;
} }
.card { .card {
background-color: #fff; background-color: #fff;
border: 1px solid #ddd; border: 1px solid #ddd;
@ -16,12 +17,14 @@
margin-bottom: 12px; margin-bottom: 12px;
} }
.card2 { .card2 {
background-color: #fff; background-color: #fff;
/* border: 0px 1px 1px 1px solid #ddd; */ /* border: 0px 1px 1px 1px solid #ddd; */
border-bottom: 1px solid #ddd; /* 底部的边框 */ border-bottom: 1px solid #ddd;
border-top: none; /* 底部的边框 */
border-top: none;
border-radius: 8px; border-radius: 8px;
/* padding: 10px; */ /* padding: 10px; */
/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */ /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
@ -33,14 +36,14 @@
position: relative; position: relative;
width: 100%; width: 100%;
height: 99px; height: 99px;
} }
.background-image { .background-image {
width: 100%; width: 100%;
height: 99px; height: 99px;
} }
.overlay-content { .overlay-content {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px; left: 10px;
@ -51,17 +54,18 @@
/* justify-content: center; */ /* justify-content: center; */
/* flex-direction: column; */ /* flex-direction: column; */
/* 其他样式属性,根据需要添加 */ /* 其他样式属性,根据需要添加 */
} }
.home-swiper {
.home-swiper {
width: 95%; width: 95%;
/* height: 360rpx; */ /* height: 360rpx; */
} }
/* .slide-image { /* .slide-image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} */ } */
.fontStyle{ .fontStyle {
width: 18px; width: 18px;
height: 17px; height: 17px;
font-family: D-DINExp; font-family: D-DINExp;
@ -70,4 +74,26 @@
color: #1684FF; color: #1684FF;
letter-spacing: 0; letter-spacing: 0;
text-align: center; text-align: center;
} }
/* //巡检次数 */
.count {
width: 56px;
height: 20px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 14px;
color: #333333;
letter-spacing: 0;
}
.only {
/* width: 72px; */
height: 17px;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 12px;
color: #333333;
letter-spacing: 0;
text-align: center;
}
Loading…
Cancel
Save