站点页面样式修改

This commit is contained in:
2024-04-18 16:38:42 +08:00
parent 7f3d1ab1e1
commit 8f0d33e950
4 changed files with 61 additions and 93 deletions

View File

@@ -479,4 +479,47 @@ uni-button[disabled]:not([type]), uni-button[disabled][type=default] {
.flow_icon_item_2 {
width: 46rpx;
height: 26rpx;
}
}
/** */
.title_locate
width 50%
_font(30rpx,48rpx,#333,bold)
font-style italic
.site_item
padding 5rpx 5rpx
overflow hidden
margin-bottom 10rpx
.site_item_box
_wh(98%, 100%)
margin 0 auto
padding 20rpx 10rpx 10rpx 10rpx
background-color rgb(220, 223, 230)
border-radius 10rpx
.point_title_1
_wh(100%, 40rpx)
overflow hidden
_font(26rpx,40rpx,#303133,500, center)
.point_title_2
_wh(100%, 40rpx)
overflow hidden
_font(24rpx,40rpx,#999,500, center)
.state-wrap
position fixed
z-index 200
background #f2f5fa
top calc(var(--status-bar-height) + 72rpx)
_wh(100%, 60rpx)
padding 0 14rpx
.state-color
_wh(30rpx, 30rpx)
border-radius 50%
margin-right 10rpx
.state-name
_font(28rpx, 30rpx, #333)
.xzd-wraper
position fixed
z-index 200
bottom 100rpx
padding 14rpx
background-color #fff
box-shadow: 0 0 20rpx 0 rgba(160,160,160,0.7);

View File

@@ -56,7 +56,12 @@ input[type="button"], input[type="submit"], input[type="search"], input[type="re
.jccenter {
justify-content: center !important;
}
.flexwrap {
flex-wrap: wrap
}
.allwidth {
width: 100%
}
.zd-row {
width: 100%;
display: flex;

View File

@@ -14,16 +14,16 @@
</view>
<view class="zd_content">
<view class="zd_wrapper grid-wraper">
<view class="locate_block" v-for="e in areaArr" :key="e.region_code">
<view class="zd-row locate_name" @click="getPonit (e)">
<view class="allwidth" v-for="e in areaArr" :key="e.region_code">
<view class="zd-row" @click="getPonit (e)">
<view class="title_locate">{{e.region_name}}</view>
<uni-icons :type="e.checked ? 'up' : 'down'" size="16"></uni-icons>
</view>
<view v-show="e.checked === true" class="site_block" ref="liCon">
<view class="site_item" v-for="(el, i) in e.pointArr" :key="i">
<view v-show="e.checked === true" class="zd-row flexstart flexwrap">
<view class="zd-col-12 site_item" v-for="(el, i) in e.pointArr" :key="i">
<view class="site_item_box" :class="{'bggreen': sObj.device_code === el.device_code, 'bgblue': nObj.device_code === el.device_code}" @click="setcode(el)">
<view class="title_1">{{el.device_name}}</view>
<view class="title_2">{{el.device_code}}</view>
<view class="point_title_1">{{el.device_name}}</view>
<view class="point_title_2">{{el.device_code}}</view>
</view>
</view>
</view>
@@ -165,66 +165,11 @@
<style lang="stylus">
@import '../../common/style/mixin.styl';
.zd_content
// padding-top calc(var(--status-bar-height) + 72rpx)
padding-bottom 200rpx
.locate_block
width 100%
.locate_name
position relative
_wh(100%,48rpx)
.site_block
width 100%
transition height .3s
_fj(flex-start,,,wrap)
.site_item
width 49%
padding 5rpx 5rpx
overflow hidden
margin-bottom 10rpx
_fj(center)
&:nth-child(even)
margin-left 2%
.site_item_box
_wh(100%, 100%)
padding 20rpx 10rpx 10rpx 10rpx
background-color rgb(220, 223, 230)
border-radius 10rpx
.title_locate
width 50%
_font(30rpx,40rpx,#333,bold)
font-style italic
.title_1
_wh(100%, 40rpx)
overflow hidden
_font(26rpx,40rpx,#303133,500, center)
.title_2
_wh(100%, 40rpx)
overflow hidden
_font(24rpx,40rpx,#999,500, center)
.submit-bar
box-shadow none
.state-wrap
position fixed
z-index 200
background #f2f5fa
top calc(var(--status-bar-height) + 72rpx)
_wh(100%, 60rpx)
padding 0 14rpx
.state-color
_wh(30rpx, 30rpx)
border-radius 50%
margin-right 10rpx
.state-name
_font(28rpx, 30rpx, #333)
.xzd-wraper
position fixed
z-index 200
bottom 100rpx
padding 14rpx
background-color #fff
box-shadow: 0 0 20rpx 0 rgba(160,160,160,0.7);
.button-default, .button-primary
font-size 30rpx
.bgblue .title_1,.bgblue .title_2,.bggreen .title_1,.bggreen .title_2
.bgblue .point_title_1,.bgblue .point_title_2,.bggreen .point_title_1,.bggreen .point_title_2
color #fff
</style>

View File

@@ -3,11 +3,11 @@
<nav-bar :title="title"></nav-bar>
<view class="zd_content">
<view class="zd_wrapper grid-wraper">
<view class="site_block" ref="liCon">
<view class="site_item" v-for="(e, i) in pointArr" :key="i" @tap="toCheck(e)">
<view class="zd-row flexstart flexwrap">
<view class="zd-col-12 site_item" v-for="(e, i) in pointArr" :key="i" @tap="toCheck(e)">
<view class="site_item_box" :class="{'site_checked': pkId === e.device_code}">
<view class="title_1">{{e.device_name}}</view>
<view class="title_2">{{e.device_code}}</view>
<view class="point_title_1">{{e.device_name}}</view>
<view class="point_title_2">{{e.device_code}}</view>
</view>
</view>
</view>
@@ -75,31 +75,6 @@
<style lang="stylus">
@import '../../common/style/mixin.styl';
.site_block
width 100%
transition height .3s
_fj(flex-start,,,wrap)
.site_item
width 49%
padding 5rpx 5rpx
overflow hidden
margin-bottom 10rpx
_fj(center)
&:nth-child(even)
margin-left 2%
.site_item_box
_wh(100%, 100%)
padding 20rpx 10rpx 10rpx 10rpx
background-color rgb(220, 223, 230)
border-radius 10rpx
.title_1
_wh(100%, 40rpx)
overflow hidden
_font(26rpx,40rpx,#303133,500, center)
.title_2
_wh(100%, 40rpx)
overflow hidden
_font(24rpx,40rpx,#999,500, center)
.site_checked
background-color #fff
border 2rpx solid rgba(255, 106, 0, 0.6)