Browse Source

样式优化

h5_css
蟑螂恶霸 3 years ago
parent
commit
332fde1f73
  1. 113
      pages/knowledge/knowledge.vue
  2. 18
      static/base_css.css
  3. 13
      subpkg/address/address.vue
  4. 14
      subpkg/complete/complete.vue
  5. 17
      subpkg/feedback/feedback.vue
  6. 18
      subpkg/list/list.vue
  7. 49
      subpkg/review/review.vue
  8. 6
      subpkg/role/role.vue

113
pages/knowledge/knowledge.vue

@ -1,20 +1,20 @@
<template> <template>
<view class="wrap"> <view class="wrap">
<view class="stabar"></view> <view class="stabar"></view>
<view class="secbar"> <view class="secbar">
<view class="title">知识库</view> <view class="title">知识库</view>
</view> </view>
<view class="mainwrap2"> <view class="mainwrap">
<view class="subwrap"> <view class="subwrap">
<view class="message-list"> <view class="message-list">
<view class="artlist" v-for="(item, i) in knowledgeList" :key="i" @click="navClickHandler(item)"> <view class="artlist" v-for="(item, i) in knowledgeList" :key="i" @click="navClickHandler(item)">
<view class="timetop">{{item.createTime}}</view> <view class="timetop">{{item.createTime}}</view>
<view class="txtlist">{{item.title}}</view> <view class="txtlist">{{item.title}}</view>
</view>
</view> </view>
</view>
</view> </view>
</view> </view>
<tabbar :page="page"></tabbar> <tabbar :page="page"></tabbar>
</view> </view>
</template> </template>
@ -24,78 +24,83 @@
data() { data() {
return { return {
page: "", page: "",
queryObj:{ queryObj: {
pageNum:1, pageNum: 1,
pageSize:10 pageSize: 10
}, },
total:0, total: 0,
isloading:false, isloading: false,
//数据列表 //数据列表
knowledgeList:[] knowledgeList: []
}; };
}, },
onShow() { onShow() {
this.page= "know" this.page = "know"
}, },
onLoad() { onLoad() {
this.getContentList(); this.getContentList();
}, },
methods:{ methods: {
async getContentList() { async getContentList() {
this.isloading = true this.isloading = true
const { const {
data: res data: res
} = await uni.$http.post('/small/library/listApp',this.queryObj) } = await uni.$http.post('/small/library/listApp', this.queryObj)
this.isloading = false this.isloading = false
res.rows.forEach(item=>{ res.rows.forEach(item => {
item.uploadPath = uni.$http.baseUrl +item.uploadPath item.uploadPath = uni.$http.baseUrl + item.uploadPath
}) })
this.knowledgeList =[...this.knowledgeList,...res.rows] this.knowledgeList = [...this.knowledgeList, ...res.rows]
this.total = res.total this.total = res.total
}, },
navClickHandler(item) { navClickHandler(item) {
uni.navigateTo({ uni.navigateTo({
url: '/subpkg/knowledgeInfo/knowledgeInfo?guid='+item.guid url: '/subpkg/knowledgeInfo/knowledgeInfo?guid=' + item.guid
}) })
} }
}, },
onReachBottom(){ onReachBottom() {
if(this.queryObj.pageNum * this.queryObj.pageSize >= this.total) return uni.$showMsg('已展示所有内容') if (this.queryObj.pageNum * this.queryObj.pageSize >= this.total) return uni.$showMsg('已展示所有内容')
if(this.isloading) return if (this.isloading) return
this.queryObj.pageNum++ this.queryObj.pageNum++
this.getContentList() this.getContentList()
}, },
components: {tabbar}, components: {
tabbar
},
} }
</script> </script>
<style lang="scss"> <style lang="scss">
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.title { .mainwrap {
margin-top: 0; top: 5vh;
padding-top: 16rpx; height: 80vh;
} }
.mainwrap2 {
height: calc(100% - 300rpx); .title {
} margin-top: 0;
.artlist { padding-top: 16rpx;
margin: 2% 0 3.5%; }
padding: 4% 3%;
width: 100%; .artlist {
font-size: 1.05rem; margin: 2% 0 3.5%;
box-shadow: 0 0 10rpx #ddd; padding: 4% 3%;
background: #fff; width: 100%;
border-radius: 20rpx; font-size: 1.05rem;
box-sizing: border-box; box-shadow: 0 0 10rpx #ddd;
} background: #fff;
.timetop { border-radius: 20rpx;
margin: 0 0 3%; box-sizing: border-box;
/* padding: 0 0 2%; }
.timetop {
margin: 0 0 3%;
/* padding: 0 0 2%;
border-bottom: 1px solid #eee; */ border-bottom: 1px solid #eee; */
color: #999; color: #999;
font-size: 0.9rem; font-size: 0.9rem;
} }
</style> </style>

18
static/base_css.css

@ -47,7 +47,7 @@ img {
z-index: 9999; z-index: 9999;
padding: 0 5%; padding: 0 5%;
width: 100%; width: 100%;
height: 90rpx; height: 6vh;
color: #fff; color: #fff;
line-height: 30px; line-height: 30px;
background-color: #bac6fc; background-color: #bac6fc;
@ -59,8 +59,8 @@ img {
.mainwrap { .mainwrap {
position: relative; position: relative;
top: 90rpx; top: 6vh;
height: calc(100% - 250rpx); height: 84vh;
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;
@ -216,9 +216,9 @@ h3.contit span {
.secbar { .secbar {
position: relative; position: relative;
z-index: 99; z-index: 99;
top: 90rpx; top: 6vh;
width: 100%; width: 100%;
height: 90rpx; height: 6vh;
background-color: #bac6fc; background-color: #bac6fc;
} }
@ -258,16 +258,16 @@ h3.contit span {
top: 0; top: 0;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
padding: 1% 3%; padding: 1% 3% 9%;
width: 94%; width: 94%;
height: 100%; height: 100%;
} }
.mainwrap2, .mainwrap3, .tabwrap { .mainwrap2, .mainwrap3, .tabwrap {
position: relative; position: relative;
top: 90rpx; top: 6vh;
width: 100%; width: 100%;
height: calc(100% - 180rpx); height: 88vh;
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;
@ -275,7 +275,7 @@ h3.contit span {
.mainwrap3 { .mainwrap3 {
top: 0; top: 0;
height: calc(100% - 160rpx); height: 89vh;
overflow-y: hidden; overflow-y: hidden;
} }

13
subpkg/address/address.vue

@ -7,10 +7,6 @@
<view class="mainwrap2"> <view class="mainwrap2">
<view class="subwrap"> <view class="subwrap">
<!-- 底部的边框线 -->
<image src="/static/cart_border@2x.png" class="address-border"></image>
<!-- 循环渲染地址信息 --> <!-- 循环渲染地址信息 -->
<view> <view>
@ -40,7 +36,7 @@
</view> </view>
<!-- 选择收货地址的盒子 --> <!-- 选择收货地址的盒子 -->
<view class="address-choose-box"> <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>
<button type="primary" size="mini" class="uni-button" @click="chooseAddress">新增地址</button> <button type="primary" size="mini" class="uni-button" @click="chooseAddress">新增地址</button>
</view> </view>
</view> </view>
@ -60,7 +56,7 @@
options: [{ options: [{
text: '删除', text: '删除',
style: { style: {
backgroundColor: '#C00000' backgroundColor: '#fb1010'
} }
}], }],
addressList: [] addressList: []
@ -149,9 +145,6 @@
<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;
@ -165,7 +158,7 @@
bottom: 0; bottom: 0;
padding: 10rpx 0 50rpx 0; padding: 10rpx 0 50rpx 0;
width: 100vw; width: 100vw;
height: 90rpx; height: 7vh;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
background-color: #fff; background-color: #fff;

14
subpkg/complete/complete.vue

@ -6,7 +6,7 @@
<image class="animg" src="/static/images/joy.png"></image> <image class="animg" src="/static/images/joy.png"></image>
</view> </view>
<view class="mainwrap"> <view class="mainwrap2">
<view class="title">恭喜完成本次演练!</view> <view class="title">恭喜完成本次演练!</view>
<view class="question-wrap"> <view class="question-wrap">
<view class="question-list"> <view class="question-list">
@ -444,9 +444,8 @@
} }
} }
.mainwrap { .mainwrap2 {
height: calc(100% - 150rpx); height: 94vh;
overflow-y: auto;
} }
.title { .title {
@ -494,10 +493,11 @@
margin: 2% 3%; margin: 2% 3%;
padding: 2%; padding: 2%;
width: 90%; width: 90%;
min-height: 400rpx; height: 25vh;
background: #fff; background: #fff;
border: 1px solid #18c569; border: 1px solid #18c569;
border-radius: 10px; border-radius: 20rpx;
overflow-y: auto;
} }
.qucont { .qucont {
@ -538,7 +538,7 @@
.question-record { .question-record {
margin: 3% 3% 5%; margin: 3% 3% 5%;
width: 94%; width: 94%;
height: 25%; height: 23vh;
overflow: hidden; overflow: hidden;
label { label {

17
subpkg/feedback/feedback.vue

@ -5,7 +5,7 @@
<view class="title">建议与意见反馈</view> <view class="title">建议与意见反馈</view>
</view> </view>
<view class="mainwrap2"> <view class="mainwrap2">
<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">
@ -18,7 +18,7 @@
<button class="uni-button" size="mini" type="primary" @click="toTable">提交</button> <button class="uni-button" size="mini" type="primary" @click="toTable">提交</button>
</uni-forms> </uni-forms>
</view> </view>
</view>
</view> </view>
</view> </view>
</template> </template>
@ -69,12 +69,17 @@
</script> </script>
<style scoped> <style scoped>
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.table_index { .table_index {
margin: 0 3%;
padding: 50rpx 30rpx;
width: 94%;
height: 82vh;
background-image: linear-gradient(to bottom, #fff, transparent); background-image: linear-gradient(to bottom, #fff, transparent);
height: 100%; border-radius: 20rpx;
padding: 50px 30px; box-sizing: border-box;
border-radius: 3%; }
.uni-easyinput__content-textarea {
height: 500rpx;
} }
.uni-button { .uni-button {
font-size: 30rpx; font-size: 30rpx;

18
subpkg/list/list.vue

@ -132,16 +132,16 @@
@import url("@/static/base_css.css"); @import url("@/static/base_css.css");
.mainwrap3 { .mainwrap3 {
top: 50rpx; top: 3.5vh;
height: calc(100% - 160rpx) height: 90.5vh;
} }
swiper { swiper {
position: relative; position: relative;
top: 30px; top: 3vh;
margin: 0 3%; margin: 0 3%;
width: 94%; width: 94%;
height: 280rpx; height: 18vh;
.swiper-item, .swiper-item,
image { image {
@ -149,7 +149,7 @@
margin-left: 0.1%; margin-left: 0.1%;
height: 100%; height: 100%;
align-items: center; align-items: center;
border-radius: 10px; border-radius: 20rpx;
} }
} }
.nav-list { .nav-list {
@ -159,7 +159,7 @@
margin: 4% 3%; margin: 4% 3%;
padding: 0 0 8%; padding: 0 0 8%;
width: 94%; width: 94%;
height: 55%; height: 52vh;
overflow-y: auto; overflow-y: auto;
.nav-item { .nav-item {

49
subpkg/review/review.vue

@ -96,7 +96,7 @@
margin: 0 3%; margin: 0 3%;
padding: 3%; padding: 3%;
width: 88%; width: 88%;
height: 240rpx; height: 13vh;
background-color: #fff; background-color: #fff;
border-radius: 20rpx; border-radius: 20rpx;
border: 1px solid rgba(151, 1, 188, .45); border: 1px solid rgba(151, 1, 188, .45);
@ -104,10 +104,11 @@
font-size: 32rpx; font-size: 32rpx;
line-height: 1.5; line-height: 1.5;
} }
.question-info{ .question-info{
margin-top: 20rpx; margin-top: 20rpx;
padding-top: 50rpx; padding-top: 50rpx;
height: calc(100% - 420rpx); height: 62vh;
overflow: hidden; overflow: hidden;
} }
@ -116,53 +117,11 @@
height: 100%; height: 100%;
} }
.question-item { .question-list image {
position: relative;
margin: 2% 0 3%;
width: 100%;
height: 320rpx;
border-radius: 20rpx;
overflow: hidden;
}
.question-item image, .question-list image {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.question-num {
position: absolute;
z-index: 10;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .45);
}
.question-txt {
position: absolute;
z-index: 100;
top: 3%;
left: 2%;
width: 96%;
color:#fff;
}
.question-txt .imgbox {
display: inline-block;
position: relative;
top: 20rpx;
margin: 0 12rpx;
width: 66rpx;
height: 66rpx;
}
.question-txt .ordnum {
position: absolute;
left: 48rpx;
top: 22rpx;
font-size: 38rpx;
}
.thumbtack { .thumbtack {
position: relative; position: relative;
left: 5%; left: 5%;

6
subpkg/role/role.vue

@ -138,7 +138,7 @@
} }
.mainwrap3 { .mainwrap3 {
top: 0; top: 0;
height: 100%; height: 94vh;
overflow: hidden; overflow: hidden;
} }
@ -199,7 +199,7 @@
.startbtn { .startbtn {
position: relative; position: relative;
z-index: 1; z-index: 1;
bottom: 40%; bottom: 33vh;
width: 100%; width: 100%;
height: 30%; height: 30%;
background:no-repeat 47.5% center; background:no-repeat 47.5% center;
@ -224,7 +224,7 @@
.cnote { .cnote {
position: absolute; position: absolute;
bottom: 3%; bottom: 3vh;
width: 100%; width: 100%;
color: rgba(255, 255, 255, .5); color: rgba(255, 255, 255, .5);
font-size: 0.75rem; font-size: 0.75rem;

Loading…
Cancel
Save