kylin
/
zdxtDrillProgram
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

样式优化

h5_css
蟑螂恶霸 3 years ago
parent
cf4290a46d
commit
1e0898c3b9
12 changed files with 370 additions and 261 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      components/tabbar/tabbar.vue
  2. 2
      pages/my/my.vue
  3. 12
      static/base_css.css
  4. 72
      subpkg/address/address.vue
  5. 45
      subpkg/complete/complete.vue
  6. 9
      subpkg/feedback/feedback.vue
  7. 15
      subpkg/knowledgeInfo/knowledgeInfo.vue
  8. 2
      subpkg/list/list.vue
  9. 4
      subpkg/practice/practice.vue
  10. 3
      subpkg/privacy/privacy.vue
  11. 2
      subpkg/review/review.vue
  12. 12
      subpkg/role/role.vue

7
components/tabbar/tabbar.vue
View File

@ -83,13 +83,16 @@
</script> </script>
<style lang="scss"> <style lang="scss">
.tab_bar { .tab_bar {
padding: 10rpx 0 50rpx 0;
width: 100vw; width: 100vw;
height: 90rpx; height: 90rpx;
position: fixed; position: fixed;
bottom: 30rpx; bottom: 0;
border-top: 1px solid #ddd;
background-color: #fff;
/* 模糊大小就是靠的blur这个函数中的数值大小 */ /* 模糊大小就是靠的blur这个函数中的数值大小 */
// backdrop-filter: blur(10px); // backdrop-filter: blur(10px);
border-radius: 60rpx; //border-radius: 60rpx;
.tabbarBox { .tabbarBox {
display: flex; display: flex;

2
pages/my/my.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<view class="wrap"> <view class="wrap">
<view class="stabar"></view> <view class="stabar"></view>
<view class="mainwrap2"> <view class="mainwrap">
<view class="perinfo"> <span class="type-name"><img :src="avatarUrl"></img></span> <view class="perinfo"> <span class="type-name"><img :src="avatarUrl"></img></span>
<view class="dycd"> <span class="myname">{{name}}</span> <view class="dycd"> <span class="myname">{{name}}</span>
<view class="myitem"> <span @click="showMedal()">勋章：{{medalNum}}<i :style="{'background-color':active == 0 ?'red':'none'}"></i></span> <span>挑战历史：{{challengeNum}}</span> </view> <view class="myitem"> <span @click="showMedal()">勋章：{{medalNum}}<i :style="{'background-color':active == 0 ?'red':'none'}"></i></span> <span>挑战历史：{{challengeNum}}</span> </view>

12
static/base_css.css
View File

@ -58,9 +58,9 @@ img {
.mainwrap { .mainwrap {
margin-top: 90rpx; position: relative;
padding-bottom: 5%; top: 90rpx;
height: calc(100% - 260rpx); height: calc(100% - 250rpx);
width: 100%; width: 100%;
background-image: linear-gradient(to bottom, #bac6fc, transparent 50%); background-image: linear-gradient(to bottom, #bac6fc, transparent 50%);
box-sizing: content-box; box-sizing: content-box;
@ -71,7 +71,7 @@ img {
position: relative; position: relative;
top: 1%; top: 1%;
width: 100%; width: 100%;
height: 17.5%; height: 16.5%;
text-align: center; text-align: center;
} }
@ -85,7 +85,7 @@ img {
top: -3.5%; top: -3.5%;
z-index: 1; z-index: 1;
margin: 0 auto; margin: 0 auto;
height: 65%; height: 63%;
width: 94%; width: 94%;
box-sizing: content-box; box-sizing: content-box;
border-radius: 20rpx; border-radius: 20rpx;
@ -267,7 +267,7 @@ h3.contit span {
position: relative; position: relative;
top: 90rpx; top: 90rpx;
width: 100%; width: 100%;
height: calc(100% - 200rpx); height: calc(100% - 180rpx);
background-image: linear-gradient(to bottom, #bac6fc, transparent 40%); background-image: linear-gradient(to bottom, #bac6fc, transparent 40%);
box-sizing: content-box; box-sizing: content-box;
overflow: hidden; overflow: hidden;

72
subpkg/address/address.vue
View File

@ -4,11 +4,9 @@
<view class="secbar"><label class="back" @click="back()"></label> <view class="secbar"><label class="back" @click="back()"></label>
<view class="title">联系地址</view> <view class="title">联系地址</view>
</view> </view>
<view class="cart-container"> <view class="mainwrap2">
<!-- 选择收货地址的盒子 --> <view class="subwrap">
<view class="address-choose-box">
<button type="primary" size="mini" class="btnChooseAddress" @click="chooseAddress">新增地址+</button>
</view>
<!-- 底部的边框线 --> <!-- 底部的边框线 -->
<image src="/static/cart_border@2x.png" class="address-border"></image> <image src="/static/cart_border@2x.png" class="address-border"></image>
@ -40,10 +38,20 @@
</view> </view>
</view> </view>
</view> </view>
<!-- 选择收货地址的盒子 -->
<view class="address-choose-box">
<button type="primary" size="mini" class="uni-button" @click="chooseAddress">批量刪除</button>
<button type="primary" size="mini" class="uni-button" @click="chooseAddress">新增地址</button>
</view>
</view>
</template> </template>
<script> <script>
import { mapState, mapMutations, mapGetters } from 'vuex' import {
mapState,
mapMutations,
mapGetters
} from 'vuex'
import addressVue from './address.vue'; import addressVue from './address.vue';
export default { export default {
@ -66,7 +74,9 @@
async initAddress() { async initAddress() {
const { const {
data: res data: res
} = await uni.$http.post('/small/project/address/listAll',{userId:this.userId}) } = await uni.$http.post('/small/project/address/listAll', {
userId: this.userId
})
if (!res.success) return uni.$showMsg() if (!res.success) return uni.$showMsg()
this.addressList = res.data; this.addressList = res.data;
}, },
@ -90,7 +100,8 @@
this.initAddress(); this.initAddress();
} }
if (err && (err.errMsg === 'chooseAddress:fail auth deny' || err.errMsg === 'chooseAddress:fail authorize no response')) { if (err && (err.errMsg === 'chooseAddress:fail auth deny' || err.errMsg ===
'chooseAddress:fail authorize no response')) {
// 通过调用这个方法，让用户重新授权 // 通过调用这个方法，让用户重新授权
this.reAuth() this.reAuth()
} }
@ -111,7 +122,8 @@
if (confirmResult.confirm) return uni.openSetting({ if (confirmResult.confirm) return uni.openSetting({
success: (settingResult) => { success: (settingResult) => {
if (!settingResult.authSetting['scope.address']) return uni.$showMsg('您取消了授权！') if (!settingResult.authSetting['scope.address']) return uni.$showMsg('您取消了授权！')
if (settingResult.authSetting['scope.address']) return uni.$showMsg('授权成功！请选择地址') if (settingResult.authSetting['scope.address']) return uni.$showMsg(
'授权成功！请选择地址')
} }
}) })
}, },
@ -137,6 +149,10 @@
<style lang="scss"> <style lang="scss">
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.mainwrap2 {
height: calc(100% - 350rpx);
}
.address-border { .address-border {
display: block; display: block;
width: 100%; width: 100%;
@ -144,19 +160,46 @@
} }
.address-choose-box { .address-choose-box {
height: 90px;
display: flex; display: flex;
justify-content: center; position: fixed;
bottom: 0;
padding: 10rpx 0 50rpx 0;
width: 100vw;
height: 90rpx;
border-top: 1px solid #ddd;
background-color: #fff;
.uni-button {
margin: 1% 2%;
font-size: 30rpx;
width: 55%;
height: 70rpx;
display: flex;
align-items: center; align-items: center;
justify-content: center;
background: #1367fe;
border: 1px solid #1367fe;
border-radius: 50rpx;
white-space: nowrap;
}
.uni-button:first-child {
width: 35%;
background-color: #fff;
color: #1367fe;
}
} }
.address-info-box { .address-info-box {
font-size: 12px;
height: 90px;
display: flex; display: flex;
margin: 10rpx 0;
padding: 0 10px;
height: 180rpx;
background: #fff;
border-radius: 20rpx;
font-size: 30rpx;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
padding: 0 5px;
.row1 { .row1 {
display: flex; display: flex;
@ -242,4 +285,5 @@
} }
} }
</style> </style>

45
subpkg/complete/complete.vue
View File

@ -54,7 +54,7 @@
</view> </view>
</view> </view>
<view class="popup-share" v-if="showShare"> <view class="popup-share" v-if="showShare">
<view @click="closeShare()" style="margin-left: 250px;">关闭</view> <label @click="closeShare()" class="close-button"></label>
<label class="medimg"><image src="/static/images/medal_1.png"></image></label> <label class="medimg"><image src="/static/images/medal_1.png"></image></label>
<view class="congrat">恭喜你获得1枚成就勋章！</view> <view class="congrat">恭喜你获得1枚成就勋章！</view>
<view class="perinfo"> <view class="perinfo">
@ -260,7 +260,7 @@
left: 50%; left: 50%;
transform: translate(-50%, -10%); transform: translate(-50%, -10%);
width: 300rpx; width: 300rpx;
height: 230rpx; height: 300rpx;
image { image {
width: 100%; width: 100%;
@ -281,8 +281,8 @@
} }
} }
.mainwrap3 { .mainwrap {
top: 56rpx; height: calc(100% - 150rpx);
overflow-y: auto; overflow-y: auto;
} }
@ -393,6 +393,11 @@
.item { .item {
margin: 2% 0; margin: 2% 0;
border-bottom: 1px dotted #ddd; border-bottom: 1px dotted #ddd;
label {
color: #666;
font-size: 1.0rem;
font-weight: 500;
}
} }
} }
} }
@ -435,4 +440,36 @@
height: 100%; height: 100%;
} }
} }
.close-button {
position: absolute;
top: -60rpx;
right: -10rpx;
width: 50rpx;
height: 50rpx;
background-color: rgba(255, 255, 255, .5);
border: 1rpx solid rgba(255, 255, 255, .7);
border-radius: 50%;
transform: rotate(45deg);
}
.close-button:before, .close-button:after {
content: '';
position: absolute;
top: 50%;
left: 50%;
background: #333;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.close-button:before {
height: 24rpx;
width: 4rpx;
}
.close-button:after {
height: 4rpx;
width: 24rpx;
}
</style> </style>

9
subpkg/feedback/feedback.vue
View File

@ -7,7 +7,7 @@
<view class="mainwrap2"> <view class="mainwrap2">
<view class="subwrap"> <view class="subwrap">
<view class="table_index"> <view class="table_index">
<uni-section title="建议与反馈" type="line"></uni-section> <!-- <uni-section title="建议与反馈" type="line"></uni-section> -->
<uni-forms :modelValue="formData"> <uni-forms :modelValue="formData">
<uni-forms-item label="手机" name="mobile"> <uni-forms-item label="手机" name="mobile">
<uni-easyinput type="text" v-model="formData.mobile" placeholder="请输入手机号码" /> <uni-easyinput type="text" v-model="formData.mobile" placeholder="请输入手机号码" />
@ -69,18 +69,21 @@
</script> </script>
<style scoped> <style scoped>
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.table_index { .table_index {
background-color: #fff; background-image: linear-gradient(to bottom, #fff, transparent);
height: 100%; height: 100%;
padding: 50px 30px; padding: 50px 30px;
border-radius: 3%; border-radius: 3%;
} }
.uni-button { .uni-button {
font-size: 18px; font-size: 30rpx;
width: 100%; width: 100%;
height: 70rpx; height: 70rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: #1367fe;
border-radius: 50rpx;
} }
</style> </style>

15
subpkg/knowledgeInfo/knowledgeInfo.vue
View File

@ -2,9 +2,10 @@
<view class="wrap"> <view class="wrap">
<view class="stabar"></view> <view class="stabar"></view>
<view class="secbar"><label class="back" @click="back()"></label> <view class="secbar"><label class="back" @click="back()"></label>
<view class="title"></view>
</view> </view>
<view class="mainwrap2"> <view class="mainwrap2">
<view class="title">“三类场所”消防安全提示！“三类场所”消防安全提示！</view>
<view class="timetop">2024-03-04 11:33</view>
<view class="subwrap"> <view class="subwrap">
<view v-html="content"></view> <view v-html="content"></view>
</view> </view>
@ -46,4 +47,16 @@
<style lang="scss"> <style lang="scss">
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.mainwrap2 .title {
margin: 0 3% 3%;
text-align: left;
}
.timetop {
margin: 0 3% 3%;
color: #999;
font-size: 0.9rem;
}
.subwrap {
height: calc(100% - 200rpx);
}
</style> </style>

2
subpkg/list/list.vue
View File

@ -133,7 +133,7 @@
.mainwrap3 { .mainwrap3 {
top: 50rpx; top: 50rpx;
height: calc(100% - 90rpx) height: calc(100% - 160rpx)
} }
swiper { swiper {

4
subpkg/practice/practice.vue
View File

@ -62,9 +62,11 @@
.secbar label.back { .secbar label.back {
position: absolute; position: absolute;
top: 6rpx; top: 0;
left: 4%; left: 4%;
padding-left: 0; padding-left: 0;
width: 50rpx;
height: 50rpx;
background: url(/static/images/icon_arbw.png) no-repeat left 40% center; background: url(/static/images/icon_arbw.png) no-repeat left 40% center;
background-size: auto 50%; background-size: auto 50%;
background-color: rgba(255, 255, 255, .2); background-color: rgba(255, 255, 255, .2);

3
subpkg/privacy/privacy.vue
View File

@ -47,4 +47,7 @@
<style lang="scss"> <style lang="scss">
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.subwrap > view {
margin: 0 2% 10% 2%;
}
</style> </style>

2
subpkg/review/review.vue
View File

@ -125,7 +125,7 @@
overflow: hidden; overflow: hidden;
} }
.question-item image { .question-item image, .question-list image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }

12
subpkg/role/role.vue
View File

@ -5,7 +5,7 @@
<view class="mainwrap3"> <view class="mainwrap3">
<img src="/static/images/bg_role.jpg" alt=""/> <img src="/static/images/bg_role.jpg" alt=""/>
<view class="role_wrap"> <view class="role_wrap">
<view class="<strong>contit</strong>">请选择您在“<font style="color:#fd6d1f;">{{sceneName}}</font>”演练中的角色：</view> <view class="contit">请选择您在“<font style="color:#fd6d1f;">{{sceneName}}</font>”演练中的角色：</view>
<view class="role_box"> <view class="role_box">
<block class="role-item" v-for="(item,i) in roleList" :key="i"> <block class="role-item" v-for="(item,i) in roleList" :key="i">
<span :class="item.choose === 'true' ? 'change_color':''" @click="chooseRole(item)" v-if="i<3">{{item.name}}</span> <span :class="item.choose === 'true' ? 'change_color':''" @click="chooseRole(item)" v-if="i<3">{{item.name}}</span>
@ -138,7 +138,7 @@
} }
.mainwrap3 { .mainwrap3 {
top: 0; top: 0;
height: calc(100% - 70px); height: 100%;
overflow: hidden; overflow: hidden;
} }
@ -155,8 +155,12 @@
width: 94%; width: 94%;
} }
.contit {
margin-left: 2%;
}
.role_box { .role_box {
margin: 1% 0 2% 4%; margin: 4% 0 2% 2%;
width: 96%; width: 96%;
} }
@ -195,7 +199,7 @@
.startbtn { .startbtn {
position: relative; position: relative;
z-index: 1; z-index: 1;
bottom: 35%; bottom: 40%;
width: 100%; width: 100%;
height: 30%; height: 30%;
background:no-repeat 47.5% center; background:no-repeat 47.5% center;

Write Preview
Loading…
Cancel
Save