zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改样式 和查看虚拟实物

master
夜良king 2021-12-31 18:22:30 +08:00
parent 35de0c031d
commit fada0a735f
5 changed files with 86 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
buyer/src/components/goodsDetail/ShowGoods.vue
View File

@ -7,6 +7,8 @@
<div class="item-detail-big-img"> <div class="item-detail-big-img">
<pic-zoom :url="imgList[imgIndex].url" :scale="2"></pic-zoom> <pic-zoom :url="imgList[imgIndex].url" :scale="2"></pic-zoom>
</div> </div>
<div v-if="skuDetail.goodsType !== 'VIRTUAL_GOODS'" style="margin-top:10px;rgb(153, 149, 149);">实物商品</div>
<div v-else-if="skuDetail.goodsType == 'VIRTUAL_GOODS'" style="margin-top:10px;rgb(153, 149, 149);">虚拟商品</div>
<div class="item-detail-img-row"> <div class="item-detail-img-row">
<div <div
class="item-detail-img-small" class="item-detail-img-small"

14
buyer/src/components/nav/CateNav.vue
View File

@ -4,6 +4,7 @@
<div class="all-categories hover-pointer" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">全部商品分类</div> <div class="all-categories hover-pointer" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">全部商品分类</div>
<ul class="nav-item" v-if="showNavBar"> <ul class="nav-item" v-if="showNavBar">
<li <li
class ="nav-lis"
v-for="(item, index) in navList.list" v-for="(item, index) in navList.list"
:key="index" :key="index"
@click="linkTo(item.url)" @click="linkTo(item.url)"
@ -11,7 +12,7 @@
{{ item.name }} {{ item.name }}
</li> </li>
</ul> </ul>
</div> </div> <hr style="width:1200px;height:2px;background:#e4393c;margin-top:-1px;margin-bottom:5px;"/>
<!-- 全部商品分类 --> <!-- 全部商品分类 -->
<div class="cate-list" v-show="showAlways || showFirstList" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false"> <div class="cate-list" v-show="showAlways || showFirstList" @mouseenter="showFirstList = true" @mouseleave="showFirstList = false">
<!-- 第一级分类 --> <!-- 第一级分类 -->
@ -155,6 +156,10 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.nav-lis:hover{
color:#e4393c !important;
cursor: pointer;
}
.cate-nav{ .cate-nav{
width: 1200px; width: 1200px;
position: relative; position: relative;
@ -170,9 +175,10 @@ export default {
width: 200px; width: 200px;
line-height: 40px; line-height: 40px;
color: #fff; color: #fff;
background-color: $theme_color; background-color: #e4393c;
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
border-bottom:none;
} }
.nav-item { .nav-item {
width: 1000px; width: 1000px;
@ -180,13 +186,13 @@ export default {
line-height: 40px; line-height: 40px;
overflow: hidden; overflow: hidden;
list-style: none; list-style: none;
background-color: #eee; // background-color: #eee;
display: flex; display: flex;
li { li {
float: left; float: left;
font-weight: bold; font-weight: bold;
margin-left: 20px; margin-left: 20px;
color: rgb(89, 88, 88); color: rgb(129, 127, 127);
font-size: 15px; font-size: 15px;
&:hover { &:hover {
color: $theme_color; color: $theme_color;

47
buyer/src/components/nav/GoodsClassNav.vue
View File

@ -414,7 +414,7 @@ export default {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
&:hover { &:hover {
color: $theme_color; color: #e4393c;
cursor: pointer; cursor: pointer;
} }
} }
@ -428,8 +428,8 @@ export default {
text-align: center; text-align: center;
margin: 0 3px; margin: 0 3px;
&:hover { &:hover {
color: $theme_color; color: #e4393c;
border-color: $theme_color; border-color: #e4393c;
border-bottom-color: #fff; border-bottom-color: #fff;
cursor: pointer; cursor: pointer;
ul { ul {
@ -447,7 +447,7 @@ export default {
width: 300px; width: 300px;
padding: 5px 10px; padding: 5px 10px;
background: #fff; background: #fff;
border: 1px solid $theme_color; border: 1px solid #e4393c;
z-index: 1; z-index: 1;
&::before { &::before {
content: ""; content: "";
@ -470,7 +470,7 @@ export default {
margin: 3px 0; margin: 3px 0;
text-align: left; text-align: left;
&:hover { &:hover {
color: $theme_color; color: #e4393c;
cursor: pointer; cursor: pointer;
} }
} }
@ -489,23 +489,23 @@ export default {
background-color: #f3f3f3; background-color: #f3f3f3;
border: 1px solid #ddd; border: 1px solid #ddd;
&:hover { &:hover {
border-color: $theme_color; border-color: #e4393c;
background-color: #fff; background-color: #fff;
.ivu-icon { .ivu-icon {
color: #fff; color: #fff;
background-color: $theme_color; background-color: #e4393c;
} }
} }
span:nth-child(2) { span:nth-child(2) {
color: $theme_color; color: #e4393c;
} }
.ivu-icon { .ivu-icon {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
color: $theme_color; color: #e4393c;
line-height: 22px; line-height: 22px;
width: 21px; width: 21px;
height: 22px; height: 22px;
@ -545,7 +545,7 @@ export default {
width: 100px; width: 100px;
height: 50px; height: 50px;
float: left; float: left;
line-height: 50px; line-height: 45px;
border: 1px solid #ddd; border: 1px solid #ddd;
margin: -1px -1px 0 0; margin: -1px -1px 0 0;
overflow: hidden; overflow: hidden;
@ -557,7 +557,8 @@ export default {
} }
&:hover { &:hover {
border-color: $theme_color; border-color: #e4393c;
border: 2px solid #e4393c;
top: 0; top: 0;
left: 0; left: 0;
position: relative; position: relative;
@ -571,7 +572,7 @@ export default {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: $theme_color; color: #e4393c;
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
@ -584,7 +585,7 @@ export default {
div { div {
width: 0; width: 0;
border-top: 20px solid transparent; border-top: 20px solid transparent;
border-right: 20px solid $theme_color; border-right: 20px solid #e4393c;
} }
.ivu-icon { .ivu-icon {
font-size: 12px; font-size: 12px;
@ -597,7 +598,7 @@ export default {
} }
} }
.border-color { .border-color {
border-color: $theme_color; border-color: #e4393c;
z-index: 1; z-index: 1;
} }
} }
@ -619,8 +620,8 @@ export default {
font-size: 12px; font-size: 12px;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
color: $theme_color; color: #e4393c;
border-color: $theme_color; border-color: #e4393c;
} }
} }
} }
@ -666,14 +667,14 @@ export default {
height: 30px; height: 30px;
float: left; float: left;
line-height: 30px; line-height: 30px;
color: $primary_color; color:#4d9cf1;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
font-size: 12px; font-size: 12px;
padding: 2px; padding: 2px;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: $theme_color; color: #e4393c;
} }
} }
} }
@ -695,8 +696,8 @@ export default {
font-size: 12px; font-size: 12px;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
color: $theme_color; color: #e4393c;
border-color: $theme_color; border-color: #e4393c;
} }
} }
} }
@ -716,11 +717,13 @@ export default {
} }
.more-options{ .more-options{
margin: 5px; margin: 5px;
color: #2d8cf0; color: #4d9cf1;
font-size: 12px; font-size: 12px;
cursor: pointer; cursor: pointer;
text-align: right; text-align: right;
} }
.more-options:hover{
color:#0165d1;
}
/** 其他筛选项 end */ /** 其他筛选项 end */
</style> </style>

54
buyer/src/pages/GoodsList.vue
View File

@ -68,8 +68,14 @@
已有<span>{{ item.content.commentNum || 0 }}</span 已有<span>{{ item.content.commentNum || 0 }}</span
>人评价 >人评价
</div> </div>
<div class="goods-show-seller"> <div class="goods-show-seller" >
<Tag class="goods-show-buyer" v-if="item.content.selfOperated" size="default" color="error">自营</Tag>{{ item.content.storeName }} <Tag class="goods-show-buyer" v-if="item.content.selfOperated" size="default" color="error">自营
</Tag>
<div class="goods-show-right" >
<div class="goods-show-middle" v-if="goodsListType.content.goodsType == 'VIRTUAL_GOODS'">虚拟</div>
<div class="goods-show-middle" v-else-if="goodsListType.content.goodsType == 'PHYSICAL_GOODS'">实物</div>
</div>
<span class="text-bottom" style="color:#e4393c;">{{ item.content.storeName }}</span>
</div> </div>
</div> </div>
</div> </div>
@ -112,6 +118,7 @@ export default {
], ],
goodsList: [], // 商品列表 goodsList: [], // 商品列表
loading: false, // 加载状态 loading: false, // 加载状态
goodsListType:"",
total: 0, // 列表总数 total: 0, // 列表总数
params: { // 请求参数 params: { // 请求参数
pageNumber: 0, pageNumber: 0,
@ -178,6 +185,9 @@ export default {
if (res.success) { if (res.success) {
this.goodsList = res.result.content; this.goodsList = res.result.content;
this.total = res.result.totalElements; this.total = res.result.totalElements;
for(var i = 0;i<this.goodsList.length; i++){
this.goodsListType = this.goodsList[i];
}
} }
}).catch(() => { }).catch(() => {
this.loading = false; this.loading = false;
@ -210,16 +220,24 @@ export default {
.goods-show-info>.goods-show-seller>.goods-show-buyer{ .goods-show-info>.goods-show-seller>.goods-show-buyer{
height:16px;width:30px; height:16px;width:30px;
white-space: nowrap; white-space: nowrap;
line-height:16px; line-height:17px;
text-align: center;
padding:0 3px; padding:0 3px;
background-color:#E23A3A; background-color:#E23A3A;
} }
.goods-show-seller{
// padding:3px 0;
vertical-align: middle;
}
.container { .container {
margin: 15px auto; margin: 15px auto;
width: 1200px; width: 1200px;
min-width: 1000px; min-width: 1000px;
position: relative; position: relative;
} }
.price-sort:hover{
color:#E23A3A;
}
.goods-box { .goods-box {
display: flex; display: flex;
} }
@ -228,10 +246,32 @@ export default {
width: 200px; width: 200px;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.goods-show-right{
width:35px;
height:17px;
// vertical-align:middle;
overflow: hidden;
margin-top:1.5px;
margin-right: 5px;
line-height: 16px;
background:white;
border-radius:4px;
margin-bottom:5px;
float:left;
text-align:center;
border:1px solid rgba(112, 123, 187, 0.8);
color:rgba(112, 123, 187, 0.8);
}
.goods-show-middle:hover{
color:rgba(2, 15, 88, 0.6);
border:0.2px solid rgba(0, 13, 87, 0.6);
border-radius:4px;
line-height: 18px;
}
.item-as-title { .item-as-title {
width: 100%; width: 100%;
height: 36px; height: 36px;
color: $theme_color; color: #e4393c;
line-height: 36px; line-height: 36px;
font-size: 18px; font-size: 18px;
} }
@ -242,7 +282,7 @@ export default {
float: right; float: right;
margin-right: 15px; margin-right: 15px;
font-size: 10px; font-size: 10px;
color: #ccc; color: rgb(204, 204, 204);
} }
.item-as { .item-as {
width: 160px; width: 160px;
@ -332,7 +372,7 @@ export default {
background-color: #fff; background-color: #fff;
} }
.goods-list-tool span:hover { .goods-list-tool span:hover {
border-color: $theme_color; border-color: #e4393c;
position: relative; position: relative;
text-decoration: none; text-decoration: none;
z-index: 1; z-index: 1;
@ -344,7 +384,7 @@ export default {
.goods-list-tool-active { .goods-list-tool-active {
color: #fff; color: #fff;
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
background-color: $theme_color !important; background-color: #e4393c !important;
} }
/* ---------------商品栏结束------------------- */ /* ---------------商品栏结束------------------- */