cyy-vue-material 7.0.19 → 7.0.21

package/src/package/cyy-collocation/cyy-collocation.vue

@@ -1,639 +1,639 @@
-<template>
-  <div>
-    <div v-if="!props.goods" :style="noDataStyle">请选择商品</div>
-    <div
-      v-else
-      :style="{
-        margin: `${props.marginTop}px 0 ${props.marginBottom}px 0`,
-        backgroundColor: `${props.backgroundColor}`,
-        borderRadius: `${props.cornerStyle}px`,
-      }"
-    >
-      <div
-        class="top"
-        :class="{ left: props.arrange !== 4 }"
-        :style="{
-          background: ruleTitle && props.activityTitleLable[0].lable === 2 ? `${ruleTitleImg}` : '',
-        }"
-        v-if="props.arrange !== 4"
-      >
-        <div v-if="ruleTitle && props.activityTitleLable[0].lable === 2"></div>
-        <div class="title" v-else>
-          <span class="mainTitle" :class="mainTitleColor">{{ ruleTitle ? props.activityTitleLable[0].title : hasNewActivityTitle }}</span
-          ><span class="subtitle">{{ ruleTitle ? props.activityTitleLable[0].subTitle : hasNewActivitySubtitle }}</span>
-        </div>
-        <div class="more" @click="goMoreGoods()" v-if="props.more === 1 && [1, 2, 3].includes(props.arrange)">更多<img src="../../static/arrow.png" /></div>
-        <div v-else class="more"></div>
-      </div>
-      <div class="top" :class="{ center: props.arrange === 4 }" v-else-if="props.arrange === 4">
-        <div class="title">
-          <div class="line"></div>
-          <div class="mainTitle">{{ hasNewActivityTitle }}</div>
-          <div class="line"></div>
-        </div>
-      </div>
-      <div v-if="selectImgRule('show')" class="mainImage">
-        <img
-          :style="{
-            borderTopLeftRadius: `${props.cornerStyle}px`,
-            borderTopRightRadius: `${props.cornerStyle}px`,
-          }"
-          :src="selectImgRule('url')"
-          alt="主图"
-          @click="linkClick(selectImgRule('link'))"
-        />
-      </div>
-
-      <div class="goodsList" :class="[`arrange-${props.arrange}`, { isLc: !isLc }]">
-        <div
-          class="goodsBox"
-          :style="{
-            borderRadius: `${props.cornerStyle}px`,
-          }"
-          v-for="(item, index) in goodsList"
-          :key="item.skuCode"
-          @click="goGoodsDetail(item)"
-        >
-          <div class="goodsImageWrapper" :class="{ spacingStyle: props.spacingStyle === 2 }" style="position: relative">
-            <img
-              class="goodsImage"
-              :style="{ borderRadius: `${props.cornerStyle}px` }"
-              :src="item.dataPic ? (item.dataPic.indexOf('http') === -1 ? domainNameUrl + item.dataPic : item.dataPic) : ''"
-              alt="商品图片"
-            />
-            <div
-              v-if="isLc === false && (item.goodsSupplynum <= 0 || item.goodsProperty5 === '1')"
-              class="imgMarked"
-              :style="{
-                borderRadius: props.borderRadius,
-              }"
-            >
-              <div class="maskState">
-                {{ getMaskState(item.goodsProperty5) }}
-              </div>
-            </div>
-          </div>
-
-          <div class="goodsDescription">
-            <div class="goodsName"><vopLabel />{{ item.goodsName }}</div>
-            <section class="footerContent">
-              <div class="goodsTagList" v-if="props.goodsTag.length > 0 && [2, 4].includes(props.arrange)">
-                <div v-for="tag in props.goodsTag" :key="tag.id">
-                  <span class="tag">
-                    {{ tag.value }}
-                  </span>
-                </div>
-              </div>
-              <div class="goodsPrice">
-                <span class="priceUnit">￥</span>{{ item.pricesetNprice }}
-                <div class="scribing" v-if="props.markedPrice === 1">￥{{ item.pricesetMakeprice }}</div>
-              </div>
-              <div class="goodsBuy" @click="handleBuyGoods(item.skuNo)" v-if="props.purchaseIcon === 1">立即购买</div>
-            </section>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { fetchGoodImpl, isLc, getUrl } from "../../utils/index.js";
-import { get } from "lodash-es";
-import vopLabel from "../../components/vop-label.vue";
-
-export default {
-  name: "cyy-collocation",
-  props: {
-    props: {
-      arrange: Number,
-      selectImg: String,
-      selectImgs: Array,
-      selectGoods: Array,
-      markedPrice: Number,
-      purchaseIcon: Number,
-      more: Number,
-      activityTitle: String,
-      activitySubtitle: String,
-      activityTitleLable: Array,
-      goodsTag: Array,
-      backgroundColor: String,
-      cornerStyle: Number,
-      spacingStyle: Number,
-      marginTop: Number,
-      marginBottom: Number,
-    },
-  },
-  data() {
-    return {
-      noDataStyle: {
-        width: "100%",
-        height: "180px",
-        lineHeight: "180px",
-        fontSize: "30px",
-        backgroundColor: "#ccc",
-        color: "#aaa",
-        textAlign: "center",
-      },
-      goodsList: [],
-      completeGoodsList: [],
-      domainNameUrl: "",
-      imgUrl: "",
-      isLc,
-    };
-  },
-  computed: {
-    mainTitleColor() {
-      return {
-        mainTitleColor: this.props.arrange === 5,
-      };
-    },
-    hasNewActivityTitle(){
-       if (this.props.activityTitleLable?.length) {
-           if (this.props.activityTitleLable[0].lable === 2) {
-              return ''
-           } else {
-              return this.props.activityTitleLable[0].title 
-           }
-       } else {
-          return this.props.activityTitle
-       }
-    },
-    hasNewActivitySubtitle(){
-       if (this.props.activityTitleLable?.length) {
-           if (this.props.activityTitleLable[0].lable === 2) {
-              return ''
-           } else {
-              return this.props.activityTitleLable[0].subTitle 
-           }
-       } else {
-          return this.props.activitySubtitle
-       }
-    },
-    ruleTitle() {
-      if (this.props.arrange === 1) {
-        if (this.props.activityTitleLable?.length) {
-          return true;
-        } else {
-          return false;
-        }
-      } else {
-        return false;
-      }
-    },
-    ruleTitleImg() {
-      return this.ruleTitle ? `url(${this.props.activityTitleLable[0]?.imgUrl}) no-repeat` : "";
-    },
-    selectImgRule() {
-      return (params) => {
-        if (params === "show") {
-          if (this.props.selectImg || this.props.selectImgs?.length) {
-            return true;
-          }
-          return false;
-        }
-        if (params === "url") {
-          if (this.props.selectImgs?.length) {
-            return this.props.selectImgs[0].imgUrl;
-          }
-          if (this.props.selectImg) {
-            return this.props.selectImg;
-          }
-          return "";
-        }
-        if (params === "link") {
-          if (this.props.selectImgs?.length) {
-            return this.props.selectImgs[0];
-          }
-          return [{ link: "无操作" }];
-        }
-      };
-    },
-  },
-  components: {
-    vopLabel,
-  },
-  mounted() {
-    console.log(this.props, "💛💛");
-    this.init();
-  },
-  methods: {
-    async init() {
-      this.domainNameUrl = getUrl(this);
-      const { goods = [] } = this.props;
-      const goodsCode = goods.toString();
-      const paramObj = { goodsCode };
-      const res = await fetchGoodImpl(this, paramObj);
-      this.completeGoodsList = get(res, "list", []);
-      this.completeGoodsList.forEach((item) => {
-        item.rsGoodsFileDomainList = [];
-        item.rsSkuDomainList = [];
-      });
-      // 具有[更多>]的样式只展示部分商品
-      if (this.props.arrange === 1) {
-        this.goodsList = this.completeGoodsList.slice(0, 12);
-      } else if (this.props.arrange === 2) {
-        this.goodsList = this.completeGoodsList.slice(0, 2);
-      } else if (this.props.arrange === 3) {
-        this.goodsList = this.completeGoodsList.slice(0, 3);
-      } else if ([4, 5].includes(this.props.arrange)) {
-        this.goodsList = this.completeGoodsList.slice(0, 60);
-      }
-    },
-
-    goGoodsDetail(item) {
-      if (isLc) {
-        return;
-      }
-      const { skuCode } = item;
-      let params = {
-        skuNo: skuCode,
-      };
-      this.$routers.push("detail", params);
-    },
-
-    goMoreGoods() {
-      if (isLc) {
-        return;
-      }
-      this.$storage.set("goodsList", this.completeGoodsList);
-      this.$routers.push("/pages/goodsList/main");
-    },
-
-    getMaskState(state) {
-      if (state === "1") {
-        return "预售中";
-      } else {
-        return "补货中";
-      }
-    },
-    linkClick(item) {
-      this.$emit("linkClick", item);
-    },
-  },
-};
-</script>
-<style lang="less">
-body {
-  margin: 0px;
-}
-</style>
-<style lang="less" scoped>
-.mainTitleColor {
-  color: #f52b43;
-}
-
-.top {
-  margin: 0 10px;
-  padding: 12px 0;
-
-  .mainTitle {
-    font-size: 16px;
-    font-weight: 600;
-  }
-
-  &.left {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-
-    .title {
-      .subtitle {
-        height: 17px;
-        line-height: 17px;
-        font-size: 12px;
-        font-weight: 400;
-        color: #333333;
-        margin-left: 8px;
-      }
-    }
-
-    .more {
-      display: flex;
-      align-items: center;
-      height: 18px;
-      line-height: 18px;
-      font-size: 12px;
-      font-weight: 400;
-      color: #81848c;
-
-      img {
-        width: 6px;
-        height: 8px;
-      }
-    }
-  }
-
-  &.center {
-    padding: 18px 0;
-
-    .title {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      .line {
-        margin: 0 10px;
-        background: #d4d4d4;
-        width: 72px;
-        height: 1px;
-      }
-
-      .mainTitle {
-        text-align: center;
-      }
-    }
-  }
-}
-
-.mainImage {
-  margin: 0 10px;
-  max-width: 100%;
-
-  img {
-    width: 100%;
-    max-height: 200px;
-    object-fit: cover;
-  }
-}
-
-.goodsList {
-  margin: 8px 10px 0;
-
-  .goodsBox {
-    background-color: white;
-
-    .imgMarked {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(0, 0, 0, 0.5);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      z-index: 100;
-
-      .maskState {
-        font-size: 23px;
-        color: white;
-      }
-    }
-
-    .goodsDescription {
-      .goodsName {
-        height: 2em;
-        line-height: 1em;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        font-size: 12px;
-      }
-
-      .footerContent {
-        margin-bottom: 10px;
-
-        .goodsTagList {
-          display: flex;
-          margin-top: 6px;
-          font-size: 12px;
-
-          .tag {
-            background-color: #fee9ec;
-            border-radius: 10px;
-            padding: 0.25em 0.5em;
-            color: #f52b43;
-          }
-
-          .tag:not(:last-child) {
-            margin-right: 8px;
-          }
-        }
-
-        .goodsPrice {
-          color: #f53a50;
-          font-weight: 600;
-          font-size: 14px;
-
-          .priceUnit {
-            font-size: 10px;
-          }
-
-          .scribing {
-            display: inline-block;
-            color: #ccc;
-            text-decoration: line-through;
-            font-weight: normal;
-            font-size: 12px;
-          }
-        }
-
-        .goodsBuy {
-          border: 0;
-          border-radius: 15px;
-          background-color: red;
-          color: white;
-          font-size: 12px;
-          line-height: 22px;
-          width: 5em;
-          margin-left: auto;
-          margin-right: auto;
-          text-align: center;
-        }
-      }
-    }
-  }
-}
-
-.arrange-1 {
-  display: flex;
-  justify-content: space-between;
-  overflow: hidden;
-  overflow-x: scroll;
-
-  .goodsBox {
-    width: 120px;
-    .goodsImageWrapper {
-      .goodsImage {
-        width: 100px;
-        height: 100px;
-      }
-    }
-  }
-
-  .goodsBox:not(:last-child) {
-    padding-right: 20px;
-
-    .spacingStyle::after {
-      content: "";
-      position: absolute;
-      right: -10px;
-      top: 0;
-      width: 1px;
-      height: 100%;
-      background-color: #d3d3d3;
-    }
-  }
-
-  .footerContent {
-    margin-top: 10px;
-
-    .goodsBuy {
-      text-align: center;
-      margin-bottom: 10px;
-    }
-  }
-}
-
-.arrange-2,
-.arrange-4 {
-  display: flex;
-  flex-direction: column;
-  margin: 8px auto;
-
-  .goodsBox {
-    display: flex;
-    margin-bottom: 10px;
-    padding: 10px;
-
-    .goodsImageWrapper {
-      width: 50%;
-
-      .goodsImage {
-        width: 100%;
-        height: 100%;
-        aspect-ratio: 1;
-      }
-    }
-
-    .goodsDescription {
-      position: relative;
-      margin-left: 10px;
-      width: 100%;
-
-      .goodsName {
-        font-size: 14px;
-        height: auto;
-      }
-
-      .footerContent {
-        .goodsPrice {
-          display: inline;
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          font-size: 16px;
-        }
-
-        .goodsBuy {
-          display: inline;
-          position: absolute;
-          bottom: 0;
-          right: 0;
-          margin-bottom: 0;
-        }
-      }
-    }
-  }
-}
-
-.arrange-3 {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-
-  .goodsBox {
-    margin-top: 10px;
-    background: white;
-    width: 48%;
-
-    .goodsImage {
-      width: 100%;
-      height: 100%;
-      aspect-ratio: 1;
-    }
-
-    .goodsDescription {
-      .goodsName {
-        margin-top: 10px;
-        height: 2em;
-        line-height: 1em;
-      }
-
-      .footerContent {
-        margin-top: 5px;
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-end;
-
-        .goodsBuy {
-          margin: 0;
-        }
-      }
-    }
-  }
-
-  .goodsBox:nth-child(1) {
-    width: 100%;
-
-    .goodsImage {
-      width: 100%;
-      height: 120px;
-      object-fit: cover;
-    }
-
-    .goodsName {
-      height: auto;
-    }
-  }
-}
-
-.arrange-5 {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px 10px;
-
-  .goodsBox {
-    background: white;
-    @media (max-width: 320px) {
-      width: 100px;
-    }
-    @media (min-width: 321px) and (max-width: 375px) {
-      width: 110px;
-    }
-    @media (min-width: 376px) and (max-width: 390px) {
-      width: 110px;
-    }
-    @media (min-width: 391px) and (max-width: 430px) {
-      width: 120px;
-    }
-    @media (min-width: 431px) and (max-width: 1000px) {
-      width: 120px;
-    }
-
-    .goodsImage {
-      width: 100%;
-      height: 100%;
-      aspect-ratio: 1 / 1;
-    }
-  }
-
-  .goodsDescription {
-    .footerContent {
-      margin-bottom: 10px;
-
-      .goodsPrice {
-        text-align: center;
-      }
-
-      .goodsBuy {
-        text-align: center;
-        margin-bottom: 10px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div>
+    <div v-if="!props.goods" :style="noDataStyle">请选择商品</div>
+    <div
+      v-else
+      :style="{
+        margin: `${props.marginTop}px 0 ${props.marginBottom}px 0`,
+        backgroundColor: `${props.backgroundColor}`,
+        borderRadius: `${props.cornerStyle}px`,
+      }"
+    >
+      <div
+        class="top"
+        :class="{ left: props.arrange !== 4 }"
+        :style="{
+          background: ruleTitle && props.activityTitleLable[0].lable === 2 ? `${ruleTitleImg}` : '',
+        }"
+        v-if="props.arrange !== 4"
+      >
+        <div v-if="ruleTitle && props.activityTitleLable[0].lable === 2"></div>
+        <div class="title" v-else>
+          <span class="mainTitle" :class="mainTitleColor">{{ ruleTitle ? props.activityTitleLable[0].title : hasNewActivityTitle }}</span
+          ><span class="subtitle">{{ ruleTitle ? props.activityTitleLable[0].subTitle : hasNewActivitySubtitle }}</span>
+        </div>
+        <div class="more" @click="goMoreGoods()" v-if="props.more === 1 && [1, 2, 3].includes(props.arrange)">更多<img src="../../static/arrow.png" /></div>
+        <div v-else class="more"></div>
+      </div>
+      <div class="top" :class="{ center: props.arrange === 4 }" v-else-if="props.arrange === 4">
+        <div class="title">
+          <div class="line"></div>
+          <div class="mainTitle">{{ hasNewActivityTitle }}</div>
+          <div class="line"></div>
+        </div>
+      </div>
+      <div v-if="selectImgRule('show')" class="mainImage">
+        <img
+          :style="{
+            borderTopLeftRadius: `${props.cornerStyle}px`,
+            borderTopRightRadius: `${props.cornerStyle}px`,
+          }"
+          :src="selectImgRule('url')"
+          alt="主图"
+          @click="linkClick(selectImgRule('link'))"
+        />
+      </div>
+
+      <div class="goodsList" :class="[`arrange-${props.arrange}`, { isLc: !isLc }]">
+        <div
+          class="goodsBox"
+          :style="{
+            borderRadius: `${props.cornerStyle}px`,
+          }"
+          v-for="(item, index) in goodsList"
+          :key="item.skuCode"
+          @click="goGoodsDetail(item)"
+        >
+          <div class="goodsImageWrapper" :class="{ spacingStyle: props.spacingStyle === 2 }" style="position: relative">
+            <img
+              class="goodsImage"
+              :style="{ borderRadius: `${props.cornerStyle}px` }"
+              :src="item.dataPic ? (item.dataPic.indexOf('http') === -1 ? domainNameUrl + item.dataPic : item.dataPic) : ''"
+              alt="商品图片"
+            />
+            <div
+              v-if="isLc === false && (item.goodsSupplynum <= 0 || item.goodsProperty5 === '1')"
+              class="imgMarked"
+              :style="{
+                borderRadius: props.borderRadius,
+              }"
+            >
+              <div class="maskState">
+                {{ getMaskState(item.goodsProperty5) }}
+              </div>
+            </div>
+          </div>
+
+          <div class="goodsDescription">
+            <div class="goodsName"><vopLabel />{{ item.goodsName }}</div>
+            <section class="footerContent">
+              <div class="goodsTagList" v-if="props.goodsTag.length > 0 && [2, 4].includes(props.arrange)">
+                <div v-for="tag in props.goodsTag" :key="tag.id">
+                  <span class="tag">
+                    {{ tag.value }}
+                  </span>
+                </div>
+              </div>
+              <div class="goodsPrice">
+                <span class="priceUnit">￥</span>{{ item.pricesetNprice }}
+                <div class="scribing" v-if="props.markedPrice === 1">￥{{ item.pricesetMakeprice }}</div>
+              </div>
+              <div class="goodsBuy" @click="handleBuyGoods(item.skuNo)" v-if="props.purchaseIcon === 1">立即购买</div>
+            </section>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { fetchGoodImpl, isLc, getUrl } from "../../utils/index.js";
+import { get } from "lodash-es";
+import vopLabel from "../../components/vop-label.vue";
+
+export default {
+  name: "cyy-collocation",
+  props: {
+    props: {
+      arrange: Number,
+      selectImg: String,
+      selectImgs: Array,
+      selectGoods: Array,
+      markedPrice: Number,
+      purchaseIcon: Number,
+      more: Number,
+      activityTitle: String,
+      activitySubtitle: String,
+      activityTitleLable: Array,
+      goodsTag: Array,
+      backgroundColor: String,
+      cornerStyle: Number,
+      spacingStyle: Number,
+      marginTop: Number,
+      marginBottom: Number,
+    },
+  },
+  data() {
+    return {
+      noDataStyle: {
+        width: "100%",
+        height: "180px",
+        lineHeight: "180px",
+        fontSize: "30px",
+        backgroundColor: "#ccc",
+        color: "#aaa",
+        textAlign: "center",
+      },
+      goodsList: [],
+      completeGoodsList: [],
+      domainNameUrl: "",
+      imgUrl: "",
+      isLc,
+    };
+  },
+  computed: {
+    mainTitleColor() {
+      return {
+        mainTitleColor: this.props.arrange === 5,
+      };
+    },
+    hasNewActivityTitle(){
+       if (this.props.activityTitleLable?.length) {
+           if (this.props.activityTitleLable[0].lable === 2) {
+              return ''
+           } else {
+              return this.props.activityTitleLable[0].title 
+           }
+       } else {
+          return this.props.activityTitle
+       }
+    },
+    hasNewActivitySubtitle(){
+       if (this.props.activityTitleLable?.length) {
+           if (this.props.activityTitleLable[0].lable === 2) {
+              return ''
+           } else {
+              return this.props.activityTitleLable[0].subTitle 
+           }
+       } else {
+          return this.props.activitySubtitle
+       }
+    },
+    ruleTitle() {
+      if (this.props.arrange === 1) {
+        if (this.props.activityTitleLable?.length) {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        return false;
+      }
+    },
+    ruleTitleImg() {
+      return this.ruleTitle ? `url(${this.props.activityTitleLable[0]?.imgUrl}) no-repeat` : "";
+    },
+    selectImgRule() {
+      return (params) => {
+        if (params === "show") {
+          if (this.props.selectImg || this.props.selectImgs?.length) {
+            return true;
+          }
+          return false;
+        }
+        if (params === "url") {
+          if (this.props.selectImgs?.length) {
+            return this.props.selectImgs[0].imgUrl;
+          }
+          if (this.props.selectImg) {
+            return this.props.selectImg;
+          }
+          return "";
+        }
+        if (params === "link") {
+          if (this.props.selectImgs?.length) {
+            return this.props.selectImgs[0];
+          }
+          return [{ link: "无操作" }];
+        }
+      };
+    },
+  },
+  components: {
+    vopLabel,
+  },
+  mounted() {
+    console.log(this.props, "💛💛");
+    this.init();
+  },
+  methods: {
+    async init() {
+      this.domainNameUrl = getUrl(this);
+      const { goods = [] } = this.props;
+      const goodsCode = goods.toString();
+      const paramObj = { goodsCode };
+      const res = await fetchGoodImpl(this, paramObj);
+      this.completeGoodsList = get(res, "list", []);
+      this.completeGoodsList.forEach((item) => {
+        item.rsGoodsFileDomainList = [];
+        item.rsSkuDomainList = [];
+      });
+      // 具有[更多>]的样式只展示部分商品
+      if (this.props.arrange === 1) {
+        this.goodsList = this.completeGoodsList.slice(0, 12);
+      } else if (this.props.arrange === 2) {
+        this.goodsList = this.completeGoodsList.slice(0, 2);
+      } else if (this.props.arrange === 3) {
+        this.goodsList = this.completeGoodsList.slice(0, 3);
+      } else if ([4, 5].includes(this.props.arrange)) {
+        this.goodsList = this.completeGoodsList.slice(0, 60);
+      }
+    },
+
+    goGoodsDetail(item) {
+      if (isLc) {
+        return;
+      }
+      const { skuCode } = item;
+      let params = {
+        skuNo: skuCode,
+      };
+      this.$routers.push("detail", params);
+    },
+
+    goMoreGoods() {
+      if (isLc) {
+        return;
+      }
+      this.$storage.set("goodsList", this.completeGoodsList);
+      this.$routers.push("/pages/goodsList/main");
+    },
+
+    getMaskState(state) {
+      if (state === "1") {
+        return "预售中";
+      } else {
+        return "补货中";
+      }
+    },
+    linkClick(item) {
+      this.$emit("linkClick", item);
+    },
+  },
+};
+</script>
+<style lang="less">
+body {
+  margin: 0px;
+}
+</style>
+<style lang="less" scoped>
+.mainTitleColor {
+  color: #f52b43;
+}
+
+.top {
+  margin: 0 10px;
+  padding: 12px 0;
+
+  .mainTitle {
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  &.left {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+
+    .title {
+      .subtitle {
+        height: 17px;
+        line-height: 17px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #333333;
+        margin-left: 8px;
+      }
+    }
+
+    .more {
+      display: flex;
+      align-items: center;
+      height: 18px;
+      line-height: 18px;
+      font-size: 12px;
+      font-weight: 400;
+      color: #81848c;
+
+      img {
+        width: 6px;
+        height: 8px;
+      }
+    }
+  }
+
+  &.center {
+    padding: 18px 0;
+
+    .title {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .line {
+        margin: 0 10px;
+        background: #d4d4d4;
+        width: 72px;
+        height: 1px;
+      }
+
+      .mainTitle {
+        text-align: center;
+      }
+    }
+  }
+}
+
+.mainImage {
+  margin: 0 10px;
+  max-width: 100%;
+
+  img {
+    width: 100%;
+    max-height: 200px;
+    object-fit: cover;
+  }
+}
+
+.goodsList {
+  margin: 8px 10px 0;
+
+  .goodsBox {
+    background-color: white;
+
+    .imgMarked {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 100;
+
+      .maskState {
+        font-size: 23px;
+        color: white;
+      }
+    }
+
+    .goodsDescription {
+      .goodsName {
+        height: 2em;
+        line-height: 1em;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 12px;
+      }
+
+      .footerContent {
+        margin-bottom: 10px;
+
+        .goodsTagList {
+          display: flex;
+          margin-top: 6px;
+          font-size: 12px;
+
+          .tag {
+            background-color: #fee9ec;
+            border-radius: 10px;
+            padding: 0.25em 0.5em;
+            color: #f52b43;
+          }
+
+          .tag:not(:last-child) {
+            margin-right: 8px;
+          }
+        }
+
+        .goodsPrice {
+          color: #f53a50;
+          font-weight: 600;
+          font-size: 14px;
+
+          .priceUnit {
+            font-size: 10px;
+          }
+
+          .scribing {
+            display: inline-block;
+            color: #ccc;
+            text-decoration: line-through;
+            font-weight: normal;
+            font-size: 12px;
+          }
+        }
+
+        .goodsBuy {
+          border: 0;
+          border-radius: 15px;
+          background-color: red;
+          color: white;
+          font-size: 12px;
+          line-height: 22px;
+          width: 5em;
+          margin-left: auto;
+          margin-right: auto;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+
+.arrange-1 {
+  display: flex;
+  justify-content: space-between;
+  overflow: hidden;
+  overflow-x: scroll;
+
+  .goodsBox {
+    width: 120px;
+    .goodsImageWrapper {
+      .goodsImage {
+        width: 100px;
+        height: 100px;
+      }
+    }
+  }
+
+  .goodsBox:not(:last-child) {
+    padding-right: 20px;
+
+    .spacingStyle::after {
+      content: "";
+      position: absolute;
+      right: -10px;
+      top: 0;
+      width: 1px;
+      height: 100%;
+      background-color: #d3d3d3;
+    }
+  }
+
+  .footerContent {
+    margin-top: 10px;
+
+    .goodsBuy {
+      text-align: center;
+      margin-bottom: 10px;
+    }
+  }
+}
+
+.arrange-2,
+.arrange-4 {
+  display: flex;
+  flex-direction: column;
+  margin: 8px auto;
+
+  .goodsBox {
+    display: flex;
+    margin-bottom: 10px;
+    padding: 10px;
+
+    .goodsImageWrapper {
+      width: 50%;
+
+      .goodsImage {
+        width: 100%;
+        height: 100%;
+        aspect-ratio: 1;
+      }
+    }
+
+    .goodsDescription {
+      position: relative;
+      margin-left: 10px;
+      width: 100%;
+
+      .goodsName {
+        font-size: 14px;
+        height: auto;
+      }
+
+      .footerContent {
+        .goodsPrice {
+          display: inline;
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          font-size: 16px;
+        }
+
+        .goodsBuy {
+          display: inline;
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+.arrange-3 {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+
+  .goodsBox {
+    margin-top: 10px;
+    background: white;
+    width: 48%;
+
+    .goodsImage {
+      width: 100%;
+      height: 100%;
+      aspect-ratio: 1;
+    }
+
+    .goodsDescription {
+      .goodsName {
+        margin-top: 10px;
+        height: 2em;
+        line-height: 1em;
+      }
+
+      .footerContent {
+        margin-top: 5px;
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+
+        .goodsBuy {
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  .goodsBox:nth-child(1) {
+    width: 100%;
+
+    .goodsImage {
+      width: 100%;
+      height: 120px;
+      object-fit: cover;
+    }
+
+    .goodsName {
+      height: auto;
+    }
+  }
+}
+
+.arrange-5 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px 10px;
+
+  .goodsBox {
+    background: white;
+    @media (max-width: 320px) {
+      width: 100px;
+    }
+    @media (min-width: 321px) and (max-width: 375px) {
+      width: 110px;
+    }
+    @media (min-width: 376px) and (max-width: 390px) {
+      width: 110px;
+    }
+    @media (min-width: 391px) and (max-width: 430px) {
+      width: 120px;
+    }
+    @media (min-width: 431px) and (max-width: 1000px) {
+      width: 120px;
+    }
+
+    .goodsImage {
+      width: 100%;
+      height: 100%;
+      aspect-ratio: 1 / 1;
+    }
+  }
+
+  .goodsDescription {
+    .footerContent {
+      margin-bottom: 10px;
+
+      .goodsPrice {
+        text-align: center;
+      }
+
+      .goodsBuy {
+        text-align: center;
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
+</style>