Skip to content

M
mallapp
Commit 38c2e88b authored by zhengke's avatar zhengke
Browse files
Options

修改

parent fd33398d
Show whitespace changes
Inline Side-by-side
Showing with 222 additions and 240 deletions
components/goods/style5.vue
View file @ 38c2e88b
...@@ -107,7 +107,7 @@ export default { ...@@ -107,7 +107,7 @@ export default {
.her-scoller { .her-scoller {
overflow-x: auto !important; overflow-x: auto !important;
padding: 12px; padding: 12px;
display: flex; /* display: flex; */
white-space: nowrap; white-space: nowrap;
} }
/* .her-scoller::after { /* .her-scoller::after {
...@@ -122,6 +122,7 @@ export default { ...@@ -122,6 +122,7 @@ export default {
border: 1rpx solid transparent; border: 1rpx solid transparent;
border-radius: 10rpx; border-radius: 10rpx;
padding-bottom: 10rpx; padding-bottom: 10rpx;
display:inline-block;
/* float: left; */ /* float: left; */
} }
.her-scoller .good-five .tips { .her-scoller .good-five .tips {
......
components/study/style5.vue
View file @ 38c2e88b
...@@ -9,12 +9,10 @@ ...@@ -9,12 +9,10 @@
'padding-bottom':goodsInfo.PaddingBottom+'px', 'padding-bottom':goodsInfo.PaddingBottom+'px',
'padding-left':goodsInfo.PaddingLeft+'px', 'padding-left':goodsInfo.PaddingLeft+'px',
}"> }">
<view class="good-five" @click="openGood(item)" v-for="(item, gli) in goodsInfo.list" :style="{borderRadius:goodsInfo.SearchFilletPX==0?10:goodsInfo.SearchFilletPX+'px'}" :key="gli"> <view class="myStudy_five_study" @click="openGood(item)" v-for="(item, gli) in goodsInfo.list" :style="{borderRadius:goodsInfo.SearchFilletPX==0?10:goodsInfo.SearchFilletPX+'px'}" :key="gli">
<view class="img-box"> <view class="img-box">
<view class="img-show">
<image style="width: 100%; height: 100%;" mode="aspectFill" :src="item.picUrl" /> <image style="width: 100%; height: 100%;" mode="aspectFill" :src="item.picUrl" />
</view> </view>
</view>
<view class="good-info"> <view class="good-info">
<view class="good-name" v-if="item.name">{{ item.name }}</view> <view class="good-name" v-if="item.name">{{ item.name }}</view>
<view class="good-price-info" v-if="item.lableName"> <view class="good-price-info" v-if="item.lableName">
...@@ -68,86 +66,77 @@ ...@@ -68,86 +66,77 @@
</script> </script>
<style> <style>
.her-scoller-study { .myStudy_five_study {
padding: 12px;
}
.her_Two_study{
overflow-x: auto !important;
display: flex;
white-space: nowrap;
}
.her-scoller-study .good-five {
position: relative; position: relative;
margin-right: 12px; margin-bottom: 14px;
width: 30%; display: flex;
border-radius: 10rpx; box-sizing: border-box;
padding-bottom: 10rpx; padding: 0 1px 1px 0;
overflow: hidden; width:600px;
} }
.her-scoller-study .good-five .tips { .myStudy_five_study:last-child{
width: 64rpx; margin-bottom:0!important;
height: 64rpx; }
position: absolute; .myStudy_five_study .img-box {
top: 0; width: 110px;
left: 0; height: 70px;
z-index: 4; border-radius: 4px;
}
.her-scoller-study .good-five .img-box {
width: 100%;
height: 0;
padding-top: 100%;
position: relative;
}
.her-scoller-study .good-five .img-box .img-show {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden; overflow: hidden;
z-index: 2; box-shadow: 0 4px 10px 1px #D2D2D2;
} }
.her-scoller-study .good-five .guding {
position: relative; .myStudy_five_study .good-info {
} padding: 0 12px 12px 12px;
.her-scoller-study .good-five .guding .img-box { flex: 1;
position: absolute; border: 10rpx;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.her-scoller-study .good-five .good-info {
padding: 6rpx;
padding-bottom: 0; padding-bottom: 0;
} display: flex;
.her-scoller-study .good-five .good-info .good-name { flex-direction: column;
/* width:20%; */
}
.myStudy_five_study .good-info .good-name {
font-size: 13px;
margin-bottom:5px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: block; -webkit-line-clamp: 1;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin-bottom: 4rpx; display: inline-block;
font-size: 13px; width:130px;
width: 100%; }
}
.her-scoller-study .good-five .good-info .good-price-info { .myStudy_five_study .good-info .good-price-info {
display: flex; display: flex;
justify-items: center; justify-items: center;
align-items: center; padding-bottom: 10rpx;
} }
.her-scoller-study .good-five .good-info .good-price-info .price {
.myStudy_five_study .good-info .good-price-info .price {
color: #999999; color: #999999;
flex: 1; flex: 1;
font-size: 12px; font-size: 14px;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.her-scoller-study .good-five .good-info .good-price-info .buy {
.myStudy_five_study .good-info .good-price-info .buy {
width: 24px; width: 24px;
text-align: right; text-align: right;
} }
.her_Two_study {
overflow-x: auto !important;
display: flex;
white-space: nowrap;
}
.style_five_label{
float:left;
padding: 2px 4px;
border-radius: 2px;
font-size: 10px;
color: #FAF8F9;
margin:0 5px 5px 0;
}
</style> </style>
components/studyArticle/style5.vue
View file @ 38c2e88b
<template> <template>
<view class="her-scoller-study" :style="{ <view style="width:100%;padding: 12px;" :style="{
'background-color': goodsInfo.backgroundColor 'background-color': goodsInfo.backgroundColor,
}"> }">
<view class="her_Two_study" :style="{ <view class="her_Two_study" :style="{
'background-color': goodsInfo.backgroundColor,
'padding-top':goodsInfo.PaddingTop+'px', 'padding-top':goodsInfo.PaddingTop+'px',
'padding-right':goodsInfo.PaddingRight+'px', 'padding-right':goodsInfo.PaddingRight+'px',
'padding-bottom':goodsInfo.PaddingBottom+'px', 'padding-bottom':goodsInfo.PaddingBottom+'px',
'padding-left':goodsInfo.PaddingLeft+'px', 'padding-left':goodsInfo.PaddingLeft+'px'
}"> }">
<view class="good-five" @click="openGood(item)" v-for="(item, gli) in goodsInfo.list" :style="{borderRadius:goodsInfo.SearchFilletPX==0?10:goodsInfo.SearchFilletPX+'px'}" :key="gli"> <view class="good-five-stydy" v-for="(item, gli) in goodsInfo.list" :key="gli" :style="{'borderRadius':goodsInfo.SearchFilletPX+'px'}" @click="openGood(item)">
<view class="img-box"> <view class="img-box">
<view class="img-show">
<image style="width: 100%; height: 100%;" mode="aspectFill" :src="item.picUrl" /> <image style="width: 100%; height: 100%;" mode="aspectFill" :src="item.picUrl" />
</view> </view>
</view>
<view class="good-info"> <view class="good-info">
<view class="good-name" v-if="item.name">{{ item.name }}</view> <view class="good-name" v-if="item.name">{{ item.name }}</view>
<view> <view style="overflow: hidden;">
<view style="display:inline-block;padding: 2px 4px;border-radius: 2px;font-size: 10px;color: #FAF8F9;margin-right:5px" <view class="style_five_label"
:style="{background:mainColor}" v-for="(subItem,subIndex) in item.lableNameList" :key="subIndex"> :style="{background:mainColor}" v-for="(subItem,subIndex) in item.lableNameList" :key="subIndex">
{{subItem}} {{subItem}}
</view> </view>
...@@ -29,7 +26,9 @@ ...@@ -29,7 +26,9 @@
<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth> <auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
</view> </view>
</template> </template>
<script> <script>
import goodSku from '../goods/goodsku';
import auth from '@/components/auth/index.vue'; import auth from '@/components/auth/index.vue';
export default { export default {
components: { components: {
...@@ -45,6 +44,10 @@ ...@@ -45,6 +44,10 @@
}, },
created() { created() {
this.mainColor = this.$uiConfig.mainColor; this.mainColor = this.$uiConfig.mainColor;
},
mounted(){
}, },
methods: { methods: {
openGood(item) { openGood(item) {
...@@ -67,86 +70,75 @@ ...@@ -67,86 +70,75 @@
</script> </script>
<style> <style>
.her-scoller-study { .good-five-stydy {
padding: 12px;
}
.her_Two_study{
overflow-x: auto !important;
display: flex;
white-space: nowrap;
}
.her-scoller-study .good-five {
position: relative; position: relative;
margin-right: 12px; margin-bottom: 14px;
width: 30%; display: flex;
padding-bottom: 10rpx; box-sizing: border-box;
/* border:1px solid rgb(226, 226, 226); */ padding: 0 1px 1px 0;
overflow: hidden; width:600px;
} }
.her-scoller-study .good-five .tips { .good-five-stydy:last-child{
width: 64rpx; margin-bottom:0!important;
height: 64rpx; }
position: absolute; .good-five-stydy .img-box {
top: 0; width: 110px;
left: 0; height: 70px;
z-index: 4; border-radius: 4px;
}
.her-scoller-study .good-five .img-box {
width: 100%;
height: 0;
padding-top: 100%;
position: relative;
}
.her-scoller-study .good-five .img-box .img-show {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden; overflow: hidden;
z-index: 2; box-shadow: 0 4px 10px 1px #D2D2D2;
} }
.her-scoller-study .good-five .guding {
position: relative; .good-five-stydy .good-info {
} padding: 0 12px 12px 12px;
.her-scoller-study .good-five .guding .img-box { flex: 1;
position: absolute; border: 10rpx;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.her-scoller-study .good-five .good-info {
padding: 6rpx;
padding-bottom: 0; padding-bottom: 0;
} display: flex;
.her-scoller-study .good-five .good-info .good-name { flex-direction: column;
/* width:20%; */
}
.good-five-stydy .good-info .good-name {
font-size: 13px;
margin-bottom:5px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: block; -webkit-line-clamp: 1;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
margin-bottom: 4rpx; display: inline-block;
font-size: 13px; width:130px;
width: 100%; }
}
.her-scoller-study .good-five .good-info .good-price-info { .good-five-stydy .good-info .good-price-info {
display: flex; display: flex;
justify-items: center; justify-items: center;
align-items: center; align-items: flex-end;
} height: 22px;
.her-scoller-study .good-five .good-info .good-price-info .price { flex: 1;
padding-bottom: 10rpx;
}
.good-five-stydy .good-info .good-price-info .price {
color: #999999; color: #999999;
flex: 1; flex: 1;
font-size: 12px; font-size: 14px;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
.her-scoller-study .good-five .good-info .good-price-info .buy {
.good-five-stydy .good-info .good-price-info .buy {
width: 24px; width: 24px;
text-align: right; text-align: right;
} }
.her_Two_study { overflow-x: auto !important; display: flex; white-space: nowrap; }
.style_five_label{
float:left;
padding: 2px 4px;
border-radius: 2px;
font-size: 10px;
color: #FAF8F9;
margin:0 5px 5px 0;
}
</style> </style>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment