列表接口

src/config/request/apiList/plm/index.js

+/*
+ * @Author: your name
+ * @Date: 2022-01-14 11:42:25
+ * @LastEditTime: 2022-01-14 13:56:35
+ * @LastEditors: your name
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /hs-app-project/src/config/request/apiList/plm/index.js
+ */
 
 import stylelibraryorder from './stylelibraryorder/index'
 import modelingtask from './modelingtask'
+import mobileBrand from './mobileBrand'
 export default {
     ...stylelibraryorder,
-    ...modelingtask
+    ...modelingtask,
+    ...mobileBrand
 }

src/config/request/apiList/plm/mobileBrand/index.js

+/*
+ * @Author: your name
+ * @Date: 2022-01-14 13:55:11
+ * @LastEditTime: 2022-01-14 16:50:17
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /hs-app-project/src/config/request/apiList/plm/mobileBrand/index.js
+ */
+
+import config from "../config/index";
+let className = 'mobileBrand'
+let baseUrl = `${config.baseUrl}/${className}`
+export default {
+    [className]:{
+        'dailyNewStylePage': {
+            url: `${baseUrl}/dailyNewStylePage`,
+            method: "post",
+        },
+        'stylePage': {
+            url: `${baseUrl}/stylePage`,
+            method: "post",
+        },
+        'styleDetail': {
+            url: `${baseUrl}/styleDetail`,
+            method: "get",
+        },
+    }
+}
\ No newline at end of file

src/pages/brands/brands.vue

@@ -6,13 +6,9 @@
       <u-navbar title="" :border-bottom="false" :background="background">
         <template slot="right">
           <!-- 插槽搜索按钮 -->
-          <view @click="searchCli" class="u-m-r-24 search"
-            ><image
-              class="hs-img"
-              src="../../static/images/home/search@2x.png"
-              mode=""
-            ></image
-          ></view>
+          <view @click="searchCli" class="u-m-r-24 search">
+            <image class="hs-img" src="../../static/images/home/search@2x.png" mode=""></image>
+          </view>
         </template>
       </u-navbar>
     </view>
@@ -24,13 +20,16 @@
         </view>
         <view slot="body">
           <view class="imgList">
+            <image v-for="item,index in dailyNewStyleList" :key="index" :src="`${imgUrl}${item.originalImageCode}`"
+              mode=""></image>
+            <!-- 
             <image src="../../static/images/brank/mei1.jpg" mode=""></image>
             <image src="../../static/images/brank/mei1.jpg" mode=""></image>
             <image src="../../static/images/brank/mei1.jpg" mode=""></image>
             <image src="../../static/images/brank/mei1.jpg" mode=""></image>
             <image src="../../static/images/brank/mei1.jpg" mode=""></image>
             <image src="../../static/images/brank/mei1.jpg" mode=""></image>
-            <image src="../../static/images/brank/mei1.jpg" mode=""></image>
+            <image src="../../static/images/brank/mei1.jpg" mode=""></image> -->
           </view>
         </view>
       </u-card>
@@ -43,10 +42,10 @@
         </view>
         <view slot="body">
           <view class="hotFlex">
+            <hot-style v-if="hotStylePage.records.length>0" :recordsList="hotStylePage.records"></hot-style>
+            <!-- <hot-style></hot-style>
             <hot-style></hot-style>
-            <hot-style></hot-style>
-            <hot-style></hot-style>
-            <hot-style></hot-style>
+            <hot-style></hot-style> -->
           </view>
         </view>
       </u-card>
@@ -55,73 +54,114 @@
 </template>
 
 <script>
-import headTitle from "./components/header"; //每日更新头部的东西
-import hotStyle from "./components/hotStyle"; //热门款式
-export default {
-  components: { headTitle, hotStyle },
-  data() {
-    return {
-      background: { backgroundColor: "rgba(245,245,245,0)" },
-    };
-  },
-  methods: {
-    // 搜索按钮
-    searchCli() {
-      this.$router.push("/pages/home/search");
+  import headTitle from "./components/header"; //每日更新头部的东西
+  import hotStyle from "./components/hotStyle"; //热门款式
+  export default {
+    components: {
+      headTitle,
+      hotStyle
+    },
+    data() {
+      return {
+        fabricObj: "",
+        dailyNewStyleList: [],
+        hotStylePage: [],
+        imgUrl: this.$IMG_URL, // 上传地址
+        background: {
+          backgroundColor: "rgba(245,245,245,0)"
+        },
+      };
     },
-    headTab() {
-      this.$router.push("pages/brands/everyDay");
+    created() {
+      console.log("ces");
+      this.getList()
     },
-  },
-};
+    methods: {
+      // 搜索按钮
+      searchCli() {
+        this.$router.push("/pages/home/search");
+      },
+      headTab() {
+        this.$router.push("pages/brands/everyDay");
+        // this.$router.push("pages/brands/detail");
+      },
+      getList() {
+        let param = {
+          "current": 1,
+          "size": 10,
+          "styleTag": ""
+        }
+        this.$http('mobileBrand.stylePage', param).then(res => {
+          let {
+            code,
+            data
+          } = res;
+          if (code === 200) {
+            this.dailyNewStyleList = data.dailyNewStyleList;
+            this.hotStylePage = data.hotStylePage;
+          }
+        });
+      }
+    },
+  };
 </script>
 
 <style lang="scss" scoped>
-//头部
-.back_img {
-  height: 486rpx;
-  width: 100%;
-  background: url(../../static/images/home/exhibition.png) no-repeat;
-  background-size: 100% 100%;
-}
-.search {
-  width: 60rpx;
-  height: 60rpx;
-}
-//每日更新
-.everyUpdate {
-  width: 100%;
-  ::v-deep .u-card__body {
-    padding: 0rpx 0rpx 40rpx 36rpx !important;
+  //头部
+  .back_img {
+    height: 486rpx;
+    width: 100%;
+    background: url(../../static/images/home/exhibition.png) no-repeat;
+    background-size: 100% 100%;
   }
-  ::v-deep .u-card__head {
-    padding-bottom: 34rpx !important;
+
+  .search {
+    width: 60rpx;
+    height: 60rpx;
   }
 
-  .imgList {
-    overflow-x: auto;
-    white-space: nowrap;
-    image {
-      width: 240rpx;
-      height: 160rpx;
-      border-radius: 5px;
-      padding-left: 20.3rpx;
+  //每日更新
+  .everyUpdate {
+    width: 100%;
+
+    ::v-deep .u-card__body {
+      padding: 0rpx 0rpx 40rpx 36rpx !important;
+    }
+
+    ::v-deep .u-card__head {
+      padding-bottom: 34rpx !important;
+    }
+
+    .imgList {
+      overflow-x: auto;
+      white-space: nowrap;
+      display: flex;
+
+      image {
+        width: 240rpx;
+        height: 160rpx;
+        border-radius: 5px;
+        padding-left: 20.3rpx;
+      }
     }
   }
-}
-//热门款式
-.hotstyle {
-  ::v-deep .u-card__body {
-    padding-top: 24rpx !important;
-  }
-  ::v-deep .u-card__head {
-    padding-bottom: 0rpx !important;
-  }
-  width: 100%;
-  .hotFlex {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+
+  //热门款式
+  .hotstyle {
+    ::v-deep .u-card__body {
+      padding-top: 24rpx !important;
+    }
+
+    ::v-deep .u-card__head {
+      padding-bottom: 0rpx !important;
+    }
+
+    width: 100%;
+
+    .hotFlex {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+    }
   }
-}
-</style>
+</style>
\ No newline at end of file

src/pages/brands/components/hotStyle.vue

 <template>
-  <view class="hots">
-    <image
-      @click="tabdetail"
-      class="indexhot"
-      src="../../../static/images/brank/mei1.jpg"
-    ></image>
+  <view  class="whole">
+    <view  class="hots" v-for="(item,index) in recordsList" :key="index" > 
+      <image class="indexhot" :src="`${imgUrl}${item.originalImageCode}`" @click="tabdetail(item)" mode="aspectFill" ></image>
+      
+    <!-- <image @click="tabdetail" class="indexhot" src="../../../static/images/brank/mei1.jpg"></image> -->
     <view class="hotborder">
-      <view class="hotText1">男装-上装-青年-时尚休闲</view>
+      <view class="hotText1">{{item.styleTag}}</view>
       <view class="hotText2">
-        <image
-          class="iconhot"
-          src="../../../static/images/brank/mei1.jpg"
-        ></image>
-        <text class="wen">我的文字是dsadasdasddsads</text>
-        <image
-          class="iconLove"
-          src="../../../static/images/brank/blackxin.png"
-          v-if="ImageBool"
-          @click="tabImage"
-        ></image>
-        <image
-          class="iconLove"
-          src="../../../static/images/brank/lightxin.png"
-          v-else
-          @click="tabImage"
-        ></image>
+         <image class="iconhot" :src="`${imgUrl}${item.originalImageCode}`"  mode="aspectFill" ></image>
+        <!-- <image class="iconhot" src="../../../static/images/brank/mei1.jpg"></image> -->
+        <text class="wen">{{item.materialName}}</text>
+        <image class="iconLove" src="../../../static/images/brank/blackxin.png" v-if="!item.isFavorite" @click="tabImage">
+        </image>
+        <image class="iconLove" src="../../../static/images/brank/lightxin.png" v-else @click="tabImage"></image>
       </view>
     </view>
+    </view>
   </view>
 </template>
 
 <script>
-export default {
-  data() {
-    return {
-      // 爱心切换的bool
-      ImageBool: true,
-    };
-  },
-  methods: {
-    // 点击切换心心选项
-    tabImage() {
-      this.ImageBool = !this.ImageBool;
+  export default {
+    props: {
+      recordsList: {
+        type: Array,
+        default: () => [],
+      }
+    },
+    data() {
+      return {
+        // 爱心切换的bool
+        ImageBool: true,
+        imgUrl: this.$IMG_URL, // 上传地址
+      };
+    },
+    created() {
+      console.log(this.recordsList, "recordsList");
     },
-    // 跳转到详情
-    tabdetail() {
-      this.$router.push("pages/brands/detail?id=2");
+    methods: {
+      // 点击切换心心选项
+      tabImage() {
+        this.ImageBool = !this.ImageBool;
+      },
+      // 跳转到详情
+      tabdetail(item) {
+        // console.log("KKK");
+        this.$router.push("/pages/brands/detail?id=" + item.id);
+        // this.$router.push("pages/brands/everyDay");
+      },
     },
-  },
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-.hots {
-  height: 578rpx;
-  width: 330rpx;
-  margin-bottom: 20rpx;
-  .indexhot {
-    display: block;
-    height: 434rpx;
+.whole{
+  display: flex;
+  flex-wrap: wrap;
+}
+  .hots {
+    height: 578rpx;
     width: 330rpx;
-    border-radius: 10rpx 10rpx 0 0;
-  }
-  .hotborder {
-    height: 144rpx;
-    border: 2rpx solid #e3e1e0;
-    // border-top: 0rpx !important;
-    border-radius: 0 0 10rpx 10rpx;
-  }
-  .hotText1 {
-    font-size: 24rpx;
-    font-family: PingFangSC, PingFangSC-Regular;
-    font-weight: 400;
-    color: rgba(0, 0, 0, 0.8);
-    margin: 24rpx 28rpx 0 20rpx;
-  }
-  .hotText2 {
-    width: 100%;
-    // background-color: red;
-    margin-top: 16rpx;
-    display: flex;
-    align-items: center;
-    // margin: 24rpx 0rpx 0 20rpx;
-    .iconhot {
-      width: 40rpx;
-      height: 40rpx;
-      margin-left: 20rpx;
+    margin-bottom: 20rpx;
+    margin-right: 16rpx;
+    // flex: 1;
+
+    .indexhot {
+      display: block;
+      height: 434rpx;
+      width: 330rpx;
+      border-radius: 10rpx 10rpx 0 0;
     }
-    .wen {
-      width: 192rpx;
-      font-size: 24rpx;
-      margin-left: 10rpx;
 
-      overflow: hidden; /*超出部分隐藏*/
-      white-space: nowrap; /*禁止换行*/
-      text-overflow: ellipsis;
+    .hotborder {
+      height: 144rpx;
+      // width: 193rpx; 
+      border: 2rpx solid #e3e1e0;
+      // border-top: 0rpx !important;
+      border-radius: 0 0 10rpx 10rpx;
     }
-    .iconLove {
-      width: 36rpx;
-      height: 32rpx;
-      margin-left: 20rpx;
+
+    .hotText1 {
+      font-size: 24rpx;
+      font-family: PingFangSC, PingFangSC-Regular;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.8);
+      margin: 24rpx 28rpx 0 20rpx;
+    }
+
+    .hotText2 {
+      width: 100%;
+      // background-color: red;
+      margin-top: 16rpx;
+      display: flex;
+      align-items: center;
+
+      // margin: 24rpx 0rpx 0 20rpx;
+      .iconhot {
+        width: 40rpx;
+        height: 40rpx;
+        margin-left: 20rpx;
+      }
+
+      .wen {
+        width: 192rpx;
+        font-size: 24rpx;
+        margin-left: 10rpx;
+
+        overflow: hidden;
+        /*超出部分隐藏*/
+        white-space: nowrap;
+        /*禁止换行*/
+        text-overflow: ellipsis;
+      }
+
+      .iconLove {
+        width: 36rpx;
+        height: 32rpx;
+        margin-left: 20rpx;
+      }
     }
   }
-}
-</style>
+</style>
\ No newline at end of file

src/pages/brands/components/hs-material-thumbnail.vue

 <template>
   <view class="home_con_content_order" @click="click">
-    <image
+    <!-- <image
       class="width_100 hs-height-160"
       src="@/static/images/home/1@2x.png"
       mode=""
-    ></image>
+    ></image> -->
+    <!-- <image class="width_100 hs-height-160" :src="`${imgUrl}${fileCode}`"> -->
+    <template v-for="item,index in colourApiList">
+
+      <image :key="index" v-if="item.isMain" class="width_100 hs-height-160" :src="`${imgUrl}${item.fileCode}`" />
+    </template>
     <view class="order_tit">
       <view class="u-flex justify-between u-font-32">
-        <span class="color_DDA973 u-line-1"
-          >{{ item.materialName }}加厚荷兰绒绒布布料</span
-        >
+        <span class="color_DDA973 u-line-1">{{ item.materialName }}
+          <!-- 加厚荷兰绒绒布布料 -->
+        </span>
       </view>
       <view class="u-font-24 u-m-t-20 color_6F6F72">
-        <span class="u-m-r-10">{{ item.materialCategory }}</span>
+        <span class="u-m-r-10">{{ item.category }}</span>
         |
-        <span class="u-m-l-10 u-m-r-10">{{ item.materialDoorWidth }} cm</span>
+        <span class="u-m-l-10 u-m-r-10">{{ item.clothWidth }} cm</span>
         |
-        <span class="u-m-l-10">{{ item.materialElement }}</span>
+        <span class="u-m-l-10">{{ item.component }}</span>
       </view>
     </view>
   </view>
 </template>
 
 <script>
-export default {
-  name: "hs-material-thumbnail",
-  props: {
-    item: {
-      type: Object,
-      default: () => {},
+  export default {
+    name: "hs-material-thumbnail",
+    props: {
+      item: {
+        type: Object,
+        default: () => {},
+      },
+      colourApiList: {
+        type: Array,
+        default: []
+      }
+    },
+    data() {
+      return {};
     },
-  },
-  data() {
-    return {};
-  },
-  methods: {
-    click() {
-      this.$emit("click");
+    methods: {
+      click() {
+        this.$emit("click");
+      },
     },
-  },
-};
+  };
 </script>
 
 <style scoped lang="scss">
-.home_con_content_order {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 160rpx;
-  border-radius: 8rpx;
-  overflow: hidden;
-  width: 100%;
-  .order_tit {
-    position: absolute;
-    width: 75%;
-    right: 0;
-    flex-direction: column;
+  .home_con_content_order {
+    position: relative;
     display: flex;
-    justify-content: center;
-    padding: 20rpx;
-    flex: 1;
-    height: 100%;
-    background: rgba(17, 21, 30, 0.5);
+    align-items: center;
+    justify-content: space-between;
+    height: 160rpx;
+    border-radius: 8rpx;
+    overflow: hidden;
+    width: 100%;
+
+    .order_tit {
+      position: absolute;
+      width: 75%;
+      right: 0;
+      flex-direction: column;
+      display: flex;
+      justify-content: center;
+      padding: 20rpx;
+      flex: 1;
+      height: 100%;
+      // background: rgba(17, 21, 30, 0.5);
+    }
   }
-}
-.width_30 {
-  width: 30%;
-}
 
-.color_DDA973 {
-  color: #dda973;
-}
+  .width_30 {
+    width: 30%;
+  }
 
-.color_6F6F72 {
-  color: #6f6f72;
-}
+  .color_DDA973 {
+    color: #dda973;
+  }
 
-.bd_dashed {
-  position: relative;
-}
+  .color_6F6F72 {
+    color: #6f6f72;
+  }
 
-.bd_dashed:after {
-  border-width: 1px;
-}
+  .bd_dashed {
+    position: relative;
+  }
+
+  .bd_dashed:after {
+    border-width: 1px;
+  }
 
-.bd_dashed-bottom:after,
-.bd_dashed-left:after,
-.bd_dashed-right:after,
-.bd_dashed-top-bottom:after,
-.bd_dashed-top:after,
-.bd_dashed:after {
-  content: " ";
-  position: absolute;
-  left: 0;
-  top: 0;
-  pointer-events: none;
-  box-sizing: border-box;
-  transform-origin: 0 0;
-  width: 199.8%;
-  height: 199.7%;
-  transform: scale(0.5, 0.5);
-  border: 1px dashed #e4e7ed;
-  z-index: 2;
-}
+  .bd_dashed-bottom:after,
+  .bd_dashed-left:after,
+  .bd_dashed-right:after,
+  .bd_dashed-top-bottom:after,
+  .bd_dashed-top:after,
+  .bd_dashed:after {
+    content: " ";
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+    box-sizing: border-box;
+    transform-origin: 0 0;
+    width: 199.8%;
+    height: 199.7%;
+    transform: scale(0.5, 0.5);
+    border: 1px dashed #e4e7ed;
+    z-index: 2;
+  }
 
-.ov_hiden {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-</style>
+  .ov_hiden {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>
\ No newline at end of file

src/pages/brands/detail.vue

@@ -3,7 +3,7 @@
     <!-- <u-navbar title="" :border-bottom="false" :background="background">
     </u-navbar> -->
     <view>
-      <u-image height="750rpx" src="@/static/images/brank/deImg.png"></u-image>
+      <u-image height="750rpx" :src="`${imgUrl}${tabledata.originalImageCode}`"></u-image>
     </view>
     <view class="u-p-r-30 u-p-l-30">
       <!--款式信息 -->
@@ -11,36 +11,36 @@
         <view class="u-border-bottom u-line-88">款式信息</view>
         <view class="fabric u-m-t-24">
           <text class="textStyle1">产品款号</text>
-          <text class="textStyle2">AS23124</text>
+          <text class="textStyle2">{{tabledata.styleCode}}</text>
         </view>
         <view class="fabric u-m-t-8">
           <text class="textStyle1">面料供应商</text>
-          <text class="textStyle2">AS23124</text>
+          <text class="textStyle2">{{tabledata.supplierName}}</text>
         </view>
       </view>
       <!-- 面料信息 -->
       <view class="bg-fff u-p-r-30 u-p-b-30 u-p-l-30 item">
         <view class="u-border-bottom u-line-88">面料信息</view>
         <view class="u-m-t-30 u-m-b-56">
-          <material :item="item"></material>
+          <material :item="item" :colourApiList="tabledata.colourApiList"></material>
         </view>
         <!-- 其他颜色 -->
         <view class="u-flex">
           <view class="overflow u-flex-1">
             <view>其他颜色</view>
             <view>
-              <view class="image u-m-r-10">
-                <image src="" style="width: 100%; height: 100%"></image>
+              <view class="image u-m-r-10" v-for="item,index in tabledata.colourApiList" :key="index">
+                <image v-if="item.isMain" :src="`${imgUrl}${item.fileCode}`" style="width: 100%; height: 100%"></image>
                 <view class="image-tip u-line-1">颜色</view>
               </view>
-              <view class="image u-m-r-10">
+              <!-- <view class="image u-m-r-10">
                 <image src="" style="width: 100%; height: 100%"></image>
                 <view class="image-tip u-line-1">颜色</view>
               </view>
               <view class="image u-m-r-10">
                 <image src="" style="width: 100%; height: 100%"></image>
                 <view class="image-tip u-line-1">颜色</view>
-              </view>
+              </view> -->
             </view>
           </view>
         </view>
@@ -53,97 +53,144 @@
 </template>
 
 <script>
-import material from "./components/hs-material-thumbnail.vue";
-export default {
-  components: { material },
-  data() {
-    return {
-      item: {},
-    };
-  },
-};
+  import material from "./components/hs-material-thumbnail.vue";
+  export default {
+    components: {
+      material
+    },
+    data() {
+      return {
+        tabledata:{},
+        item: {},
+        id: "",
+        imgUrl: this.$IMG_URL, // 上传地址
+      };
+    },
+    watch: {
+      id: {
+        handler() {
+          console.log("oid");
+          this.detail()
+        }
+      }
+    },
+
+    created() {
+      this.detail()
+    },
+    onLoad(options) {
+      this.id = options.id;
+
+    },
+    methods: {
+      detail() {
+        let param = {
+          id: this.id
+        }
+        this.$http('mobileBrand.styleDetail', param).then(res => {
+          let {
+            code,
+            data
+          } = res;
+          if (code === 200) {
+       this.tabledata=data
+       this.item=data.materialInfo
+          }
+        });
+      }
+    },
+  };
 </script>
 
 <style scoped lang="scss">
-$h-color: #af8d66;
-$activeColor: #dda973;
-$color: rgba(175, 141, 102, 0.1);
-$main-color: #fff;
-// 款式信息
-.textStyle1 {
-  display: inline-block;
-  width: 160rpx;
-  color: rgba(0, 0, 0, 0.4);
-}
-.textStyle2 {
-  margin-left: 40rpx;
-  font-size: 14px;
-  font-family: PingFangSC, PingFangSC-Regular;
-  font-weight: 500;
-  color: #333333;
-}
-// 我要采购布样
-.sampling {
-  position: fixed;
-  bottom: 0;
-  width: 750rpx;
-  height: 100rpx;
-  background: #ffffff;
-  box-shadow: 0px -2px 3px 0px rgba(178, 182, 214, 0.1);
-  .u-btn {
-    width: 630rpx;
-    height: 88rpx;
-    background: rgba(0, 0, 0, 0.8);
-    border-radius: 44rpx;
-    color: white;
+  $h-color: #af8d66;
+  $activeColor: #dda973;
+  $color: rgba(175, 141, 102, 0.1);
+  $main-color: #fff;
+
+  // 款式信息
+  .textStyle1 {
+    display: inline-block;
+    width: 160rpx;
+    color: rgba(0, 0, 0, 0.4);
   }
-}
-
-.u-line-88 {
-  line-height: 88rpx;
-}
-.bg-fff {
-  position: relative;
-  top: -10rpx;
-  background: #fff;
-}
-.item {
-  width: 100%;
-  margin-bottom: 28rpx;
-
-  &--round {
-    border-radius: 16rpx;
-    border: 1px solid rgba(0, 0, 0, 0.1);
+
+  .textStyle2 {
+    margin-left: 40rpx;
+    font-size: 14px;
+    font-family: PingFangSC, PingFangSC-Regular;
+    font-weight: 500;
+    color: #333333;
   }
-  &-tag {
-    padding: 6rpx 2px;
-    background: $color;
-    text-align: center;
-    color: $h-color;
-    display: inline-block;
-    margin-right: 10rpx;
+
+  // 我要采购布样
+  .sampling {
+    position: fixed;
+    bottom: 0;
+    width: 750rpx;
+    height: 100rpx;
+    background: #ffffff;
+    box-shadow: 0px -2px 3px 0px rgba(178, 182, 214, 0.1);
+
+    .u-btn {
+      width: 630rpx;
+      height: 88rpx;
+      background: rgba(0, 0, 0, 0.8);
+      border-radius: 44rpx;
+      color: white;
+    }
   }
-}
-
-.image {
-  position: relative;
-  width: 160rpx;
-  height: 160rpx;
-  display: inline-block;
-  &-tip {
-    text-align: center;
+
+  .u-line-88 {
+    line-height: 88rpx;
+  }
+
+  .bg-fff {
+    position: relative;
+    top: -10rpx;
+    background: #fff;
+  }
+
+  .item {
     width: 100%;
-    height: 40rpx;
-    line-height: 40rpx;
-    background: rgba(255, 255, 255, 0.8);
-    font-size: 24rpx;
-    position: absolute;
-    bottom: 0;
-    left: 0;
+    margin-bottom: 28rpx;
+
+    &--round {
+      border-radius: 16rpx;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+    }
+
+    &-tag {
+      padding: 6rpx 2px;
+      background: $color;
+      text-align: center;
+      color: $h-color;
+      display: inline-block;
+      margin-right: 10rpx;
+    }
+  }
+
+  .image {
+    position: relative;
+    width: 160rpx;
+    height: 160rpx;
+    display: inline-block;
+
+    &-tip {
+      text-align: center;
+      width: 100%;
+      height: 40rpx;
+      line-height: 40rpx;
+      background: rgba(255, 255, 255, 0.8);
+      font-size: 24rpx;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+    }
+  }
+
+  .overflow {
+    overflow-x: auto;
+    white-space: nowrap;
   }
-}
-.overflow {
+</style>
\ No newline at end of file
-  overflow-x: auto;
-  white-space: nowrap;
-}
-</style>

src/pages/brands/everyDay.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-01-14 11:42:25
+ * @LastEditTime: 2022-01-14 15:24:14
+ * @LastEditors: Please set LastEditors
+ * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ * @FilePath: /hs-app-project/src/pages/brands/everyDay.vue
+-->
 <template>
   <!-- 每日上新 -->
   <u-card full :head-border-bottom="false">
     <view slot="body">
       <view class="hotFlex">
-        <hot-style></hot-style>
-        <hot-style></hot-style>
-        <hot-style></hot-style>
-        <hot-style></hot-style>
+        <hot-style v-if="recordsList.length>0" :recordsList="recordsList"></hot-style>
       </view>
     </view>
   </u-card>
@@ -19,9 +24,33 @@ export default {
     hotStyle,
   },
   data() {
-    return {};
+    return {
+      recordsList:[]
+    };
+  },
+  created(){
+      console.log("ces");
+      this.materialDetail()
+    },
+  methods: {
+    materialDetail() {
+        let param = {
+          "current": 1,
+          "size": 10,
+          "styleTag": ""
+        }
+        this.$http('mobileBrand.dailyNewStylePage', param).then(res => {
+          let {
+            code,
+            data
+          } = res;
+          if (code === 200) {
+            this.recordsList = data.records;
+            console.log(this.recordsList,"this.recordsList");
+          }
+        });
+      }
   },
-  methods: {},
 };
 </script>