修改样式 和查看虚拟实物

buyer/src/pages/GoodsList.vue

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