新增部分楼层

buyer/src/components/indexDecorate/ModelFormItem.vue

@@ -86,6 +86,14 @@
     <template v-if="element.type == 'oneRowThreeColumns'">
       <oneRowThreeColumns :data="element" class="mb_20 width_1200_auto"></oneRowThreeColumns>
     </template>
+    <!-- 商品模块 -->
+    <template v-if="element.type == 'goodsType'">
+      <goodsAndType :paramData="element" class="mb_20 width_1200_auto"></goodsAndType>
+    </template>
+    <!-- 商品模块 -->
+    <template v-if="element.type == 'onlyGoodsModel'">
+      <onlyGoodsModel :data="element" class="mb_20 width_1200_auto"></onlyGoodsModel>
+    </template>
     <!-- 新品排行 -->
     <template v-if="element.type == 'newGoodsSort'">
       <new-goods-sort
@@ -132,6 +140,9 @@ import Recommend from "./modelList/Recommend.vue";
 import NotEnough from "./modelList/NotEnough.vue";
 import Seckill from "./modelList/Seckill.vue";
 import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
+import goodsAndType from "./modelList/goodsAndType.vue";
+import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
+
 
 export default {
   name: "modelFormItem",
@@ -145,7 +156,9 @@ export default {
     FirstPageAdvert,
     NotEnough,
     Seckill,
-    oneRowThreeColumns
+    oneRowThreeColumns,
+    goodsAndType,
+    onlyGoodsModel
   },
   data() {
     return {

buyer/src/components/indexDecorate/modelList/goodsAndType.vue

@@ -1,30 +1,46 @@
 <template>
   <div class="goods-type-wrapper">
     <div class="flex goods-type-line">
-      <div class="goods-type-title">{{data.options.title}}</div>
+      <div class="goods-type-title">{{ paramData.options.title }}</div>
       <div class="flex goods-type-labels">
-        <div :class="{'active':current === index}" class="goods-type-item" v-for="(item,index) in data.options.labels" :key="index">
-          {{item.label}}
+        <div
+          :class="{ active: current === item.___index }"
+          class="goods-type-item"
+          v-for="(item, index) in paramData.options.labels"
+          :key="index"
+          @click="handleClickLabel(item, index)"
+        >
+          {{ item.label }}
         </div>
       </div>
     </div>
     <!-- 商品部分 -->
-    <div class="goods-list">
-      <div class="goods-list-item" v-for="(item,index) in data.options.list" :key="index">
+    <div class="goods-list flex-j-sb">
+      <div
+        v-if="paramData.options"
+        class="goods-list-item"
+        v-for="(item, index) in paramData.options.list.filter((client) => {
+          return client.___index == current;
+        })"
+        :key="index"
+        @click="linkTo(item.url)"
+      >
         <div class="goods-img">
-          <img :src="item.img">
+          <img :src="item.img" />
         </div>
         <div>
-          <div class="goods-name wes-2">{{item.title}}</div>
-          <div class="goods-desc">{{item.desc}}</div>
-
+          <div class="goods-name wes-2">{{ item.title }}</div>
+          <div class="goods-desc">{{ item.desc }}</div>
         </div>
         <div class="goods-price">
-          {{item.price | unitPrice("￥")}}
+          {{ item.price | unitPrice("￥") }}
+        </div>
+        <!-- 查看 -->
+        <div class="white-shadow">
+          <div class="search">去查看</div>
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
@@ -32,45 +48,96 @@
 export default {
   name: "goods",
   props: {
-    data: {
+    paramData: {
       type: Object,
-      default: {}
-    }
+      default: {},
+    },
   },
-  data(){
-    return{
-      current:0
-    }
+  data() {
+    return {
+      current: "",
+    };
   },
-  methods:{
-
-  }
-}
+  watch: {},
+  mounted() {
+    this.current = this.paramData.options.labels[0].___index;
+  },
+  methods: {
+    // 筛选出当前分类下的商品
+    handleClickLabel(val, index) {
+      this.current = index;
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-
-.goods-list-item{
+.white-shadow {
+  width: 287px;
+  height: 122px;
+  border-radius: 0px 0px 10px 10px;
+  opacity: 1;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  display: flex;
+  justify-content: center;
+  transition: 0.35s;
+  align-items: center;
+  background: linear-gradient(
+    180deg,
+    rgba(252, 252, 252, 0.58) -50%,
+    #ffffff 99%
+  );
+}
+.search {
+  width: 143px;
+  height: 45px;
+  border-radius: 22.5px;
+  opacity: 1;
+  font-size: 20px;
+  font-weight: normal;
+  text-align: center;
+  letter-spacing: 0px;
+  line-height: 45px;
+  color: #ffffff;
+  background: $theme_color;
+}
+.goods-list-item {
+  padding-top: 30px;
   width: 287px;
   height: 343.7px;
   border-radius: 9.8px;
   opacity: 1;
   cursor: pointer;
-  background: #FFFFFF;
-  transition: 0.35s;
-  box-shadow: 0px 1px 13px 0px #E5E5E5;
-  &:hover{
-    box-shadow: 0px 1px 14px 0px #C5C5C5;
+  background: #ffffff;
+  transition: all 0.4s ease;
+  box-shadow: 0px 1px 13px 0px #e5e5e5;
+  position: relative;
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0px 1px 14px 0px #c5c5c5;
+    > .white-shadow {
+      opacity: 1;
+    }
+    > .goods-img {
+      > img {
+        opacity: 0.8 !important;
+      }
+    }
   }
 }
-.goods-img{
+.goods-img {
+  margin-bottom: 9.8px;
   text-align: center;
-  >img{
+  > img {
+    transition: all 0.4s ease;
     width: auto;
     max-height: 183px;
   }
 }
-.goods-name{
+.goods-name {
   font-size: 18px;
 
   font-weight: normal;
@@ -82,7 +149,7 @@ export default {
   color: #333333;
   -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
 }
-.goods-desc{
+.goods-desc {
   font-size: 14px;
   font-weight: normal;
   line-height: 17px;
@@ -93,22 +160,22 @@ export default {
 
   -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
 }
-.goods-price{
+.goods-price {
   font-size: 25.2px;
   font-weight: normal;
   line-height: 30px;
   text-align: center;
   letter-spacing: 0px;
 
-  color: #F31947;
+  color: #f31947;
   -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
 }
-.goods-type-line{
+.goods-type-line {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 25px;
 }
-.goods-type-title{
+.goods-type-title {
   font-size: 31px;
   font-weight: normal;
   line-height: 37px;
@@ -116,17 +183,17 @@ export default {
 
   color: #333333;
 }
-.active{
-  color: #F31947;
+.active {
+  color: #f31947;
 }
-.goods-type-labels{
+.goods-type-labels {
+  cursor: pointer;
   font-size: 21px;
   font-weight: normal;
   line-height: 25px;
   letter-spacing: 0px;
-
 }
-.goods-type-item{
+.goods-type-item {
   margin-left: 28px;
 }
 </style>

buyer/src/components/indexDecorate/modelList/onlyGoodsModel.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="goods-type-wrapper">
+    <!-- 商品部分 -->
+    <div class="goods-list flex" >
+      <div
+        class="goods-list-item"
+        v-for="(item, index) in data.options.list"
+        :key="index"
+        @click="handleClick(item)"
+      >
+        <div>
+          <div class="goods-name wes-2">{{ item.title }}</div>
+          <div class="goods-desc">{{ item.desc }}</div>
+        </div>
+        <div class="goods-img">
+          <img :src="item.img" />
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "onlyGoodsList",
+  props: {
+    data: {
+      type: Object,
+      default: {},
+    },
+  },
+  data() {
+    return {
+      flag:false,
+      tabIndex:0,
+      current: 0,
+      showModal: false,
+      selected: {}, // 已选数据
+      picModelFlag: false,
+    };
+  },
+  mounted(){
+
+  },
+  methods: {
+    handleClick(val){
+      this.linkTo(val.url)
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+.goods-type-wrapper {
+  position: relative;
+}
+.del-btn{
+  margin-left:10px;
+}
+.tab-bar {
+  margin-bottom: 20px;
+}
+.draggable {
+  padding: 10px;
+  border-bottom: 1px solid #ededed;
+  transition: 0.35s;
+
+  &:hover {
+    background-color: #ededed;
+  }
+}
+.column-config {
+  margin-left: 10px;
+  > * {
+    margin: 4px;
+  }
+}
+.column-img {
+  width: 100px;
+  height: 100px;
+}
+.add-goods {
+  margin-left: 20px;
+  margin-bottom: 10px;
+}
+.goods-list {
+  position: relative;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  &:hover {
+    > .setup-box {
+      display: block;
+    }
+  }
+}
+.column-goods-config {
+  flex: 2;
+  align-items: center;
+  justify-content: space-between;
+}
+.goods-list-item {
+  padding-top: 34.8px;
+  margin-bottom: 14.3px;
+  width: 287px;
+  height: 343.7px;
+  border-radius: 9.8px;
+  opacity: 1;
+  cursor: pointer;
+  background: #ffffff;
+  transition: 0.35s;
+  box-shadow: 0px 1px 13px 0px #e5e5e5;
+  &:hover {
+    box-shadow: 0px 1px 14px 0px #c5c5c5;
+    transform: translateY(-2px);
+  }
+}
+.goods-img {
+  text-align: center;
+  > img {
+    width: auto;
+    max-height: 183px;
+  }
+}
+.goods-name {
+  margin-bottom: 11.9px;
+  font-size: 25px;
+  font-weight: normal;
+  line-height: 30px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #333333;
+
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-desc {
+  margin-bottom: 30px;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 19px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #666666;
+
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-price {
+  font-size: 25.2px;
+  font-weight: normal;
+  line-height: 30px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #f31947;
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-type-line {
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+}
+.goods-type-title {
+  font-size: 31px;
+  font-weight: normal;
+  line-height: 37px;
+  letter-spacing: 0px;
+
+  color: #333333;
+}
+.active {
+  color: #f31947;
+}
+.goods-type-labels {
+  font-size: 21px;
+  font-weight: normal;
+  line-height: 25px;
+  letter-spacing: 0px;
+}
+.goods-type-item {
+  margin-left: 28px;
+}
+</style>

buyer/src/pages/Index.vue

@@ -38,7 +38,7 @@
     <!-- 底部栏 -->
     <BaseFooter></BaseFooter>
     <!-- 侧边栏 -->
-    <fixedBar class="fixed-bar"></fixedBar>
+    <fixedBar class="fixed-bar" :class="{'show-fixed': topSearchShow}"></fixedBar>
   </div>
 </template>
 
@@ -217,8 +217,24 @@ export default {
   transform: translateZ(0);
   top: 0;
 }
-
-
+.fixed-bar{
+  opacity: 0 !important;
+  transform: translateY(-10px);
+  transition: .35s;
+  z-index: 999999;
+  height: 0px !important;
+  overflow: hidden;
+}
+.show-fixed{
+  height: 354px !important;
+  opacity: 1 !important;
+  transform: translateY(0);
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+  transform: translateZ(0);
+}
 
 
 /* 2K */
@@ -241,12 +257,14 @@ export default {
   }
 }
 
+
+
 @media screen and (max-width: 2025px) {
   /* 样式 */
   .fixed-bar{
     position: fixed;
     right:150px;
-    top: 400px;
+    top: 300px;
   }
 }