panxiaohe
/
ceres-uniapp-v2.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

调整样式

master
xh-pan1 11 months ago
parent
c28837bb1b
commit
fd454ca222
5 changed files with 167 additions and 91 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      App.vue
  2. 245
      components/canvasShow/basics/classifyHeader/app/index.vue
  3. 2
      components/canvasShow/canvasShowPage.vue
  4. 2
      pages/tabbar/category/index.vue
  5. 5
      pages/tabbar/index/index.vue

4
App.vue
View File

@ -65,13 +65,13 @@ export default {
<style lang="scss">
@keyframes loading {
0%{
background: #e7e7e7;
background: #FAFAFA;;
}
50%{
background: #f8f8f8;
}
100%{
background: #e7e7e7;
background: #FAFAFA;
}
}
// 自定义骨架屏

245
components/canvasShow/basics/classifyHeader/app/index.vue
View File

@ -15,39 +15,49 @@
<div class="hom-pro-list" v-if="productData.length>0">
<div class="product-swiper">
<div class="product-swiper-box">
<div class="product-swiper-warp" v-for="(item,index) in productData.slice(0, 3)" :key="index">
<div class="product-swiper-warp" v-for="(item,index) in productData" :key="index">
<div class=" product-swiper-item" @click="jumpProductDetail(item)">
<div class="product-swiper-img">
<img class="img pic-img default-img" :src="item.image" onerror="this.src='url(https://ceres.zkthink.com/static/root/default.png) no-repeat center';this.οnerrοr=null">
</div>
<div class="product-swiper-info">
<label class="product-name">{{item.productName}}</label>
<div class="price-warp">
<!-- #ifdef MP-WEIXIN -->
<img class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png">
<img class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png">
<img class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png">
<img class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png">
<img class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png">
<img class="iconImg" v-if="item.activityType == 9" src="../../../static/images/memberCenterIcon.png">
<img class="iconImg" v-if="item.activityType == 8" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png">
<!-- #endif -->
<!-- #ifdef H5 || APP-PLUS -->
<image class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png"></image>
<image class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png"></image>
<image class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png"></image>
<image class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png"></image>
<image class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png"></image>
<image class="iconImg" v-if="item.activityType == 9" src="../../../static/images/memberCenterIcon.png"></image>
<image class="iconImg" v-if="item.activityType == 8" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png"></image>
<!-- #endif -->
<div class="price">
¥ {{item.price}}
</div>
<!-- <div class="original-price">-->
<!-- ¥ {{item.originalPrice}}-->
<!-- </div>-->
</div>
<div class="product-info-content">
<div class="product-name-row">
<label class="product-name">{{item.productName}}</label>
<image class="product-star" src="https://wechat.hnthee.com/ceres-local-file/image/icon_star.png"></image>
<label class="product-star-text">3.5</label>
</div>
<div class="product-sku-row">
</div>
<div class="product-price-row">
<div class="price-warp">
<!-- #ifdef MP-WEIXIN -->
<img class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png">
<img class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png">
<img class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png">
<img class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png">
<img class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png">
<img class="iconImg" v-if="item.activityType == 9" src="../../../static/images/memberCenterIcon.png">
<img class="iconImg" v-if="item.activityType == 8" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png">
<!-- #endif -->
<!-- #ifdef H5 || APP-PLUS -->
<image class="iconImg" v-if="item.activityType == 1" src="../../../static/images/groupBuyIcon.png"></image>
<image class="iconImg" v-if="item.activityType == 2" src="../../../static/images/spikeIcon.png"></image>
<image class="iconImg" v-if="item.activityType == 4" src="../../../static/images/spikeIcon.png"></image>
<image class="iconImg" v-if="item.activityType == 3" src="../../../static/images/discountListIcon.png"></image>
<image class="iconImg" v-if="item.activityType == 5" src="../../../static/images/discountListIcon.png"></image>
<image class="iconImg" v-if="item.activityType == 9" src="../../../static/images/memberCenterIcon.png"></image>
<image class="iconImg" v-if="item.activityType == 8" src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png"></image>
<!-- #endif -->
<div class="price">
¥ {{item.price}}
</div>
<!-- <div class="original-price">-->
<!-- ¥ {{item.originalPrice}}-->
<!-- </div>-->
</div>
</div>
</div>
</div>
</div>
</div>
@ -157,12 +167,9 @@ export default {
}
/**横向滑动**/
.product-swiper{
width: 100%;
height: auto;
padding: 5upx 34upx 0;
background-size: 710upx 454upx;
box-sizing: border-box;
position: relative;
overflow: hidden;
margin: 5upx 34upx;
&+.btn-more{
margin-top: 20upx;
@ -177,32 +184,38 @@ export default {
}
}
&-box {
padding-bottom: 20upx;
margin-top: 18upx;
margin-bottom: 18upx;
margin-left: 18upx;
margin-right: 18upx;
height: 100%;
width: 100%;
display: flex;
}
&-warp{
padding: 0 5upx;
height: 540upx;
width: 386upx !important;
margin-left: 18upx;
margin-right: 18upx;
}
&-item {
width: 220upx;
height: 540upx;
width: 386upx !important;
position: relative;
background-color: #FFFFFF;
}
&-img {
width: 220upx;
height: 220upx;
position: relative;
&:after{
content: '';
display: block;
width: 54upx;
height: 54upx;
background: url("../../../static/images/newProduct/flag-new.png") no-repeat;
background-size: 100% 100%;
position: absolute;
top: 0;
left: 0;
}
width: 286upx;
height: 306upx;
margin-left: auto;
margin-right: auto;
background: #F6F6F8;
border: 2upx solid #FFFFFF;
border-radius: 30upx;
position: relative;
padding: 20upx;
z-index: 2;
.img {
width: 100%;
height: 100%;
@ -210,41 +223,101 @@ export default {
}
}
&-info {
background-color: #FFFFFF;
padding: 10upx;
text-align: center;
.product-name{
font-size: 20upx;
color: #333;
display: block;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
margin-bottom: 6upx;
line-height: 28upx;
}
.price-warp{
display: flex;
justify-content: center;
align-items: center;
line-height: 28upx;
.iconImg {
width: 58rpx;
height: 36rpx;
margin-right: 10rpx;
}
.price{
color: #C83732;
font-size: 20upx;
margin-right: 10upx;
}
.original-price{
font-size: 16upx;
color: #ccc;
text-decoration: line-through;
}
}
}
width: 386upx;
height: 430upx;
position: absolute;
top: 110upx;
background: #FDFDFD;
box-shadow: 0upx 15upx 30upx 0upx #F6F6F6;
border-radius: 30upx;
text-align: center;
.product-info-content {
margin-top: 270upx;
.product-name-row{
width: 100%;
height: 33upx;
line-height: 33upx;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
justify-content: flex-start;
align-items: center;
.product-name{
width: 100%;
height: auto;
font-size: 28upx;
font-family: Source Han Sans CN;
font-weight: bold;
color: #252744;
display: block;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
line-height: 28upx;
margin-left: 30upx;
text-align: left;
}
.product-star{
width: 33upx;
height: 33upx;
}
.product-star-text{
width: auto;
height: 28upx;
line-height: 28upx;
font-size: 20rpx;
font-family: Source Han Sans CN;
font-weight: bold;
color: #A5A5AD;
margin-right: 30upx;
margin-left: 5upx;
}
}
.product-sku-row{
width: 100%;
height: 28upx;
line-height: 28upx;
margin-top: 15upx;
}
.product-price-row{
width: 100%;
height: 76upx;
line-height: 76upx;
.price-warp{
display: flex;
justify-content: center;
align-items: center;
line-height: 28upx;
.iconImg {
width: 58rpx;
height: 36rpx;
margin-right: 10rpx;
}
.price{
color: #C83732;
font-size: 20upx;
margin-right: 10upx;
}
.original-price{
font-size: 16upx;
color: #ccc;
text-decoration: line-through;
}
}
}
}
}
}
}

2
components/canvasShow/canvasShowPage.vue
View File

@ -215,7 +215,7 @@ export default {
<style lang="scss"
scoped>
.hom-layout {
background-color: #ffffff;
width: 100%;
overflow: hidden;
}

2
pages/tabbar/category/index.vue
View File

@ -112,7 +112,7 @@
if (res.data.length === 0) {
this.ifEmpty = true
}
this.slist = res.data
this.slist = res.data
this.onlyTwoLayer = !this.slist.some(function(item){
return item.childs.length>0
});

5
pages/tabbar/index/index.vue
View File

@ -199,8 +199,11 @@ export default {
lang="scss"
scoped
>
.home_page_content{
background: #FAFAFA;
}
.header {
background: #fff;
background: #FAFAFA;
.toLive {
height: 40px;

Write Preview
Loading…
Cancel
Save