主题6&7

package.json

@@ -64,6 +64,7 @@
         "less-loader": "^5.0.0",
         "prettier": "^2.2.1",
         "style-resources-loader": "^1.4.1",
+        "svg-sprite-loader": "^6.0.11",
         "vue-cli-plugin-style-resources-loader": "^0.1.5"
     }
 }

src/assets/icons/index.js

@@ -0,0 +1,3 @@
+const requireAll = requireContext => requireContext.keys().map(requireContext);
+const req = require.context('./svg', false, /\.svg$/);
+requireAll(req);

src/assets/icons/svg/redian.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="55px" height="16px" viewBox="0 0 55 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>home_icon_redian</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill-rule="evenodd">
+        <g id="首页-黑色" transform="translate(-26.000000, -386.000000)" fill-rule="nonzero">
+            <g id="编组" transform="translate(16.000000, 376.000000)">
+                <g id="编组-8" transform="translate(10.000000, 10.000000)">
+                    <g id="公告" transform="translate(28.280000, 2.920000)" fill="#FFFFFF">
+                        <path d="M9.506,0 L12.278,4.424 L10.164,4.424 L7.392,0 L9.506,0 Z M2.114,4.424 L0,4.424 L2.604,0 L4.718,0 L2.114,4.424 Z M10.052,5.488 L12.306,10.066 L10.108,10.066 L9.996,9.828 L0.896,9.828 L0.042,9.828 L3.64,3.724 L5.922,3.724 L2.982,8.47 L9.324,8.47 L7.84,5.488 L10.052,5.488 Z" id="形状"></path>
+                        <path d="M24.906,8.554 C24.906,8.76866667 24.8663333,8.967 24.787,9.149 C24.7076667,9.331 24.598,9.492 24.458,9.632 C24.318,9.772 24.1546667,9.88166667 23.968,9.961 C23.7813333,10.0403333 23.5806667,10.08 23.366,10.08 L13.496,10.08 L13.496,6.174 L24.906,6.174 L24.906,8.554 Z M23.142,7.378 L15.26,7.378 L15.26,8.89 L22.694,8.89 C22.8246667,8.89 22.932,8.848 23.016,8.764 C23.1,8.68 23.142,8.57733333 23.142,8.456 L23.142,7.378 Z M20.062,3.906 L25.186,3.906 L25.186,5.292 L12.894,5.292 L12.894,3.906 L18.116,3.906 L18.116,2.632 L14.742,2.632 L13.286,2.632 L14,0 L16.002,0 L15.666,1.232 L18.116,1.232 L18.116,0 L20.062,0 L20.062,1.232 L24.892,1.232 L24.892,2.632 L20.062,2.632 L20.062,3.906 Z" id="形状"></path>
+                    </g>
+                    <g id="新闻" transform="translate(2.294000, 2.878000)" >
+                        <path d="M0.014,0.448 L1.75,0.448 L1.568,0.028 L3.85,0.028 L4.032,0.448 L6.216,0.448 L6.216,1.834 L0.014,1.834 L0.014,0.448 Z M2.17,5.628 L2.17,4.774 L0.014,4.774 L0.014,3.388 L0.742,3.388 L0.238,2.198 L2.044,2.198 L2.548,3.388 L3.696,3.388 L4.186,2.198 L5.992,2.198 L5.488,3.388 L6.216,3.388 L6.216,4.774 L4.074,4.774 L4.074,5.628 L6.216,5.628 L6.216,7.014 L4.074,7.014 L4.074,8.806 C4.074,8.98333333 4.039,9.15133333 3.969,9.31 C3.899,9.46866667 3.80566667,9.60866667 3.689,9.73 C3.57233333,9.85133333 3.43233333,9.947 3.269,10.017 C3.10566667,10.087 2.93533333,10.122 2.758,10.122 L1.526,10.122 L1.89,9.156 L1.946,9.156 C2.09533333,9.156 2.17,9.08133333 2.17,8.932 L2.17,7.014 L0.014,7.014 L0.014,5.628 L2.17,5.628 Z M0,10.122 L0.294,7.546 L1.778,7.546 L1.484,10.122 L0,10.122 Z M4.452,7.546 L5.922,7.546 L6.216,10.122 L4.746,10.122 L4.452,7.546 Z M8.764,1.428 L8.764,2.8 L12.292,2.8 L12.292,3.99 L11.816,3.99 L11.816,10.108 L9.926,10.108 L9.926,3.99 L8.764,3.99 L8.764,8.932 L8.4,10.122 L6.51,10.122 L6.874,8.932 L6.874,1.54 L6.874,0.868 L6.874,0.35 L12.292,0.042 L12.292,1.232 L8.764,1.428 Z" id="形状"></path>
+                        <path d="M19.782,9.38 L19.782,8.428 L15.47,8.624 L15.47,7.616 L15.904,7.602 L15.904,3.682 L15.47,3.682 L15.47,2.674 L15.904,2.674 L17.724,2.674 L19.782,2.674 L21.602,2.674 L22.12,2.674 L22.12,3.682 L21.602,3.682 L21.602,7.336 L22.12,7.308 L22.12,8.316 L21.602,8.344 L21.602,9.38 L19.782,9.38 Z M17.724,5.866 L19.782,5.866 L19.782,5.278 L17.724,5.278 L17.724,5.866 Z M17.724,3.682 L17.724,4.27 L19.782,4.27 L19.782,3.682 L17.724,3.682 Z M19.782,7.42 L19.782,6.874 L17.724,6.874 L17.724,7.518 L19.782,7.42 Z M14.938,0 L17.234,0 L18.116,2.016 L15.834,2.016 L14.938,0 Z M25.06,8.61 C25.06,8.82466667 25.0203333,9.02533333 24.941,9.212 C24.8616667,9.39866667 24.752,9.562 24.612,9.702 C24.472,9.842 24.3086667,9.95166667 24.122,10.031 C23.9353333,10.1103333 23.7346667,10.15 23.52,10.15 L21.7,10.15 L22.232,8.946 L22.68,8.946 C22.8013333,8.946 22.9063333,8.904 22.995,8.82 C23.0836667,8.736 23.128,8.62866667 23.128,8.498 L23.128,1.61 L18.452,1.61 L18.452,0.238 L25.06,0.238 L25.06,8.61 Z M12.978,1.176 L14.924,1.176 L14.924,10.15 L12.978,10.15 L12.978,1.176 Z" id="形状"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/icons/svg/selected.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_gouxuan_pre</title>
+    <g id="暗色-新" stroke="none" stroke-width="1"  fill-rule="evenodd">
+        <g id="确认订单" transform="translate(-335.000000, -359.000000)">
+            <g id="编组-2" transform="translate(0.000000, 347.000000)">
+                <g id="icon/gouxuan_pre" transform="translate(335.000000, 12.000000)">
+                    <path d="M12,3 C16.9705627,3 21,7.02943725 21,12 C21,16.9705627 16.9705627,21 12,21 C7.02943725,21 3,16.9705627 3,12 C3,7.02943725 7.02943725,3 12,3 Z M16.1555861,9.48335676 C15.861615,9.25961888 15.4402153,9.28199267 15.1717299,9.55047812 L10.7519559,13.9691923 L8.80776884,12.0253519 L8.7309649,11.9582305 C8.43699375,11.7344926 8.01559412,11.7568664 7.74710866,12.0253519 C7.45421545,12.3182451 7.45421545,12.7931188 7.74710866,13.086012 L10.2219824,15.5608858 L10.2987863,15.6280071 C10.5927575,15.851745 11.0141571,15.8293712 11.2826426,15.5608858 L16.23239,10.6111383 L16.2995114,10.5343344 C16.5232493,10.2403632 16.5008755,9.81896357 16.23239,9.55047812 Z" id="形状结合"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/PayMethodPick.vue

@@ -80,7 +80,7 @@ export default {
             checked: null,
             payConfig: [],
             icons: [
-                require('@assets/svgs/icon_gouxuan_huise.svg'),
+                require('@assets/icon_gouxuan_huise.png'),
                 require('@assets/icon_gouxuan_pre.png'),
                 require('@assets/icon_gouxuan_huise1.png')
             ]
@@ -164,7 +164,7 @@ export default {
         }
     }
     .font_family {
-        color: var(--prim);
+        color: var(--primlight);
     }
 }
 </style>

src/components/SvgIcon.vue

@@ -0,0 +1,42 @@
+<template>
+    <svg :class="svgClass" aria-hidden="true">
+        <use :xlink:href="iconName"></use>
+    </svg>
+</template>
+
+<script>
+export default {
+    name: 'svg-icon',
+    props: {
+        iconClass: {
+            type: String,
+            required: true
+        },
+        className: {
+            type: String
+        }
+    },
+    computed: {
+        iconName() {
+            return `#icon-${this.iconClass}`;
+        },
+        svgClass() {
+            if (this.className) {
+                return 'svg-icon ' + this.className;
+            } else {
+                return 'svg-icon';
+            }
+        }
+    }
+};
+</script>
+
+<style scoped>
+.svg-icon {
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.15em;
+    fill: currentColor;
+    overflow: hidden;
+}
+</style>

src/components/product/BannerSmall.vue

@@ -0,0 +1,62 @@
+<template>
+    <div class="product" @click="goNext(info)">
+        <van-image width="100%" height="100%" :radius="30" :src="getImg(info.pic)" fit="cover" />
+
+        <!-- <div class="content">
+            <div class="name van-ellipsis">
+                {{ info.name }}
+            </div>
+            <div class="text van-ellipsis">
+                {{ info.remark }}
+            </div>
+        </div> -->
+    </div>
+</template>
+
+<script>
+import banner from '../../mixins/banner';
+export default {
+    mixins: [banner],
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.product {
+    // width: 255px;
+    // margin: 8px;
+    width: 100%;
+    background-color: @bg2;
+    display: inline-block;
+    border-radius: 30px;
+    overflow: hidden;
+    height: 100%;
+
+    .van-image {
+        overflow: hidden;
+        display: block;
+    }
+    .content {
+        padding: 6px 16px 10px;
+
+        .name {
+            font-size: @font2;
+            color: #ffffff;
+            line-height: 24px;
+        }
+
+        .text {
+            font-size: @font1;
+            color: @text3;
+            line-height: 20px;
+        }
+    }
+}
+</style>

src/components/product/productLarge.vue

@@ -10,14 +10,13 @@
         :class="[`product-${theme}`]"
     >
         <van-image
-            :radius="30"
             width="100%"
             height="calc(100vw - 32px)"
             v-if="type === 'collection'"
             :src="getImg(changeImgs(info.pic))"
             fit="cover"
         />
-        <van-image :radius="30" width="100%" height="calc(100vw - 32px)" v-else :src="getImg(info.pic)" fit="cover" />
+        <van-image width="100%" height="calc(100vw - 32px)" v-else :src="getImg(info.pic)" fit="cover" />
 
         <template v-if="type === 'collection'">
             <div class="content">
@@ -94,6 +93,10 @@ export default {
         type: {
             type: String,
             default: 'collection'
+        },
+        pageType: {
+            type: String,
+            default: 'fixed'
         }
     },
     computed: {
@@ -146,13 +149,16 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.product > .van-image {
+    border-radius: var(--product-radius);
+}
 .product {
     width: calc(100vw - 32px);
     margin: 8px 16px;
     position: relative;
     background-color: var(--bglight);
     display: inline-block;
-    border-radius: 30px;
+    border-radius: var(--product-radius);
     overflow: hidden;
 
     .bg {
@@ -311,4 +317,18 @@ export default {
         color: var(--danger);
     }
 }
+
+.product-theme7 {
+    position: relative;
+    .content {
+        position: absolute;
+        bottom: 10px;
+        left: 10px;
+        right: 10px;
+        z-index: 2;
+        background-color: var(--bglight);
+        border-radius: var(--product-radius);
+        backdrop-filter: blur(3px);
+    }
+}
 </style>

src/components/product/productSmall.vue

@@ -1,28 +1,121 @@
 <template>
-    <div class="product" @click="goNext(info)">
-        <van-image width="100%" height="100%" :radius="30" :src="getImg(info.pic)" fit="cover" />
+    <router-link
+        :to="{
+            path: '/' + $route.params.companyId + '/productDetail/' + info.id,
+            query: {
+                id: info.id
+            }
+        }"
+        class="product"
+    >
+        <van-image width="120" height="120" :radius="2" :src="getImg(changeImgs(info.pic))" fit="cover" />
 
-        <!-- <div class="content">
-            <div class="name van-ellipsis">
-                {{ info.name }}
+        <div class="content">
+            <div class="name van-ellipsis">{{ info.name }}</div>
+            <div class="sales-list">
+                <div class="sales" v-if="info.category">
+                    <span>{{ info.category }}</span>
+                </div>
+                <div class="sales">
+                    <span class="sales-fir">限量</span>
+                    <span>{{ info.total }}份</span>
+                </div>
             </div>
-            <div class="text van-ellipsis">
-                {{ info.remark }}
+            <div class="flex1"></div>
+
+            <div class="bottom">
+                <div class="miner">
+                    <van-image width="18" height="18" radius="18" :src="getImg(info.minterAvatar)" fit="cover" />
+                    <span class="van-ellipsis">{{ info.minter }}</span>
+                </div>
+                <div class="price" v-if="info.salable">
+                    <van-icon name="icon-icon_jiage" class-prefix="font_family" />
+                    <span> {{ info.price }}</span>
+                </div>
+                <div v-else class="status">仅展示</div>
             </div>
-        </div> -->
-    </div>
+        </div>
+
+        <div class="sold xianliang" v-if="time && info.scheduleSale">
+            <van-icon name="icon-clock" class-prefix="font_family" />
+            <span>开售：{{ startTime || time }}</span>
+        </div>
+        <div class="sold" v-else-if="isSolded">
+            <van-icon name="icon-jinzhi" class-prefix="font_family" />
+            <span>已售罄</span>
+        </div>
+        <div class="sold" v-else-if="isSold">
+            <van-icon name="icon-info_icon_qianggouzhong" class-prefix="font_family" />
+            <span>即将售罄</span>
+        </div>
+        <div class="sold hot" v-else>
+            <van-icon name="icon-info_icon_qianggouzhong" class-prefix="font_family" />
+            <span>火爆抢购中…</span>
+        </div>
+    </router-link>
 </template>
 
 <script>
-import banner from '../../mixins/banner';
+import { mapState } from 'vuex';
+import product from '../../mixins/product';
 export default {
-    mixins: [banner],
+    mixins: [product],
     props: {
         info: {
             type: Object,
             default: () => {
                 return {};
             }
+        },
+        type: {
+            type: String,
+            default: 'collection'
+        }
+    },
+    computed: {
+        ...mapState(['theme']),
+        time() {
+            if (this.info.startTime) {
+                if (this.dayjs().isSameOrBefore(this.info.startTime, 'YYYY-MM-DD HH:mm:ss')) {
+                    return this.dayjs(this.info.startTime).format('MM月DD日');
+                }
+            }
+
+            return '';
+        }
+    },
+    mounted() {
+        if (this.info.startTime) {
+            var x = this.dayjs(this.info.startTime, 'YYYY-MM-DD HH:mm:ss');
+            var y = this.dayjs();
+            let d = this.dayjs.duration(x.diff(y));
+            let day = parseInt(d.asDays());
+            if (day <= 0) {
+                this.getTime(this.info.startTime);
+            }
+        }
+    },
+    methods: {
+        likeProduct() {
+            if (!this.info.liked) {
+                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: true,
+                        likes: this.info.likes + 1
+                    });
+                    this.$toast.success('收藏成功');
+                });
+            } else {
+                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: false,
+                        likes: this.info.likes - 1
+                    });
+                    this.$toast.success('取消收藏');
+                });
+            }
         }
     }
 };
@@ -32,31 +125,127 @@ export default {
 .product {
     // width: 255px;
     // margin: 8px;
-    width: 100%;
-    background-color: @bg2;
-    display: inline-block;
-    border-radius: 30px;
+    .flex();
+    align-items: stretch;
+
+    background-color: var(--bglight);
+    border-radius: 2px;
     overflow: hidden;
-    height: 100%;
+    margin: 8px 16px;
+    position: relative;
 
     .van-image {
         overflow: hidden;
         display: block;
+        flex-shrink: 0;
     }
     .content {
-        padding: 6px 16px 10px;
+        padding: 12px 12px 3px;
+        flex-grow: 1;
+        .flex-col();
+        overflow: hidden;
 
         .name {
             font-size: @font2;
-            color: #ffffff;
+            font-weight: bold;
+            color: var(--text1);
             line-height: 24px;
         }
 
-        .text {
+        .sales-list {
+            margin-top: 8px;
+            .flex();
+        }
+
+        .sales {
+            overflow: hidden;
             font-size: @font1;
-            color: @text3;
-            line-height: 20px;
+            border-radius: 2px;
+
+            span {
+                padding: 0 10px;
+                line-height: 20px;
+                height: 20px;
+                display: inline-block;
+                &.sales-fir {
+                    background: var(--prim);
+                    color: var(--text2);
+                }
+                background-color: var(--fadePrim);
+                color: var(--prim);
+            }
+        }
+        .sales + .sales {
+            margin-left: 14px;
         }
+
+        .bottom {
+            display: flex;
+            margin-top: 14px;
+            align-items: center;
+            overflow: hidden;
+            width: 100%;
+
+            .miner {
+                display: flex;
+                align-items: center;
+                margin-right: 6px;
+                overflow: hidden;
+                flex-grow: 1;
+
+                span {
+                    color: var(--info);
+                    font-size: @font1;
+                    margin-left: 6px;
+                }
+            }
+
+            .price {
+                flex-shrink: 0;
+                font-size: 28px;
+                color: var(--text1);
+                line-height: 20px;
+                font-family: OSP;
+                .flex();
+                .font_family {
+                    font-size: 8px;
+                    line-height: 16px;
+                    margin-top: 8px;
+                }
+            }
+        }
+    }
+}
+
+.status {
+    font-size: @font2;
+    color: var(--text1);
+}
+.sold {
+    background-color: var(--bglight);
+    font-size: @font1;
+    color: var(--info);
+    padding: 0 6px;
+    line-height: 24px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 3;
+    .flex();
+    .font_family {
+        margin-right: 2px;
+    }
+
+    &.preSold {
+        color: var(--danger);
+    }
+
+    &.xianliang {
+        color: var(--primlight);
+    }
+
+    &.hot {
+        color: var(--danger);
     }
 }
 </style>

src/main.js

@@ -15,6 +15,8 @@ import colors from './plugins/colors';
 import PageTitle from './components/PageTitle';
 import LikeButton from './components/LikeButton.vue';
 import Driver from './components/Driver.vue';
+import SvgIcon from './components/SvgIcon.vue';
+import './assets/icons';
 import common from './mixins/common';
 import VueClipboard from 'vue-clipboard2';
 import queryString from 'query-string';
@@ -96,6 +98,7 @@ const app = createApp(App)
     .component('van-image', ImgContent)
     .component('van-pull-refresh', PullRefresh)
     .component('page-bar', PageBar)
+    .component('svg-icon', SvgIcon)
     .use(store)
     .use(router)
     .provide('appHeight', appHeight)

src/styles/theme.less

@@ -12,6 +12,7 @@
     --bg3:#272b2e;
     --text1:#fff;
     --text2:#000;
+    --product-radius:30px;
 }
 
 .theme2 {
@@ -28,6 +29,7 @@
     --bg3:#272b2e;
     --text1:#fff;
     --text2:#000;
+    --product-radius:30px;
     --van-primary-color: var(--prim);
     --van-tabbar-item-active-color: var(--prim);
     --van-tabs-default-color: var(--prim);
@@ -54,6 +56,7 @@
     --bg3:#272b2e;
     --text1:#fff;
     --text2:#000;
+    --product-radius:30px;
     --van-primary-color: var(--prim);
     --van-tabbar-item-active-color: var(--prim);
     --van-tabs-default-color: var(--prim);
@@ -81,6 +84,7 @@
     --bg3:#fff;
     --text1:#000;
     --text2:#fff;
+    --product-radius:30px;
     --van-primary-color: var(--prim);
     --van-tabbar-item-active-color: var(--prim);
     --van-tabs-default-color: var(--prim);
@@ -108,6 +112,63 @@
     --bg3:#1C1C1C;
     --text1:#fff;
     --text2:#000;
+    --product-radius:30px;
+    --van-primary-color: var(--prim);
+    --van-tabbar-item-active-color: var(--prim);
+    --van-tabs-default-color: var(--prim);
+    --van-tabs-bottom-bar-color: var(--prim);
+    --van-tab-active-text-color: var(--prim);
+    --van-field-error-message-color: var(--prim);
+    --van-button-primary-background-color: var(--prim);
+    --van-button-primary-border-color: var(--prim);
+    --van-number-keyboard-button-background-color: var(--prim);
+    --van-button-primary-background-color:var(--prim);
+}
+
+
+.theme6 {
+    --prim: #FFE196;
+    --fadePrim: #2D2B25;
+    --darkPrim: #FFE196;
+    --primlight: #FFB600;
+    --btnText: #000;
+    --bglight:#1C1C1C;
+    --danger:#FF4F50;
+    --info:#60616D;
+    --bg:#181818;
+    --bg2:#000000;
+    --bg3:#272b2e;
+    --text1:#fff;
+    --text2:#000;
+    --product-radius:2px;
+    --van-primary-color: var(--prim);
+    --van-tabbar-item-active-color: var(--prim);
+    --van-tabs-default-color: var(--prim);
+    --van-tabs-bottom-bar-color: var(--prim);
+    --van-tab-active-text-color: var(--prim);
+    --van-field-error-message-color: var(--prim);
+    --van-button-primary-background-color: var(--prim);
+    --van-button-primary-border-color: var(--prim);
+    --van-number-keyboard-button-background-color: var(--prim);
+    --van-button-primary-background-color:var(--prim);
+}
+
+
+.theme7 {
+    --prim: #D3FA51;
+    --fadePrim: #2D2B25;
+    --darkPrim: #D3FA51;
+    --primlight: #7CD400;
+    --btnText: #000;
+    --bglight:#1C1C1C;
+    --danger:#FF4F50;
+    --info:#60616D;
+    --bg:#181818;
+    --bg2:#000000;
+    --bg3:#272b2e;
+    --text1:#fff;
+    --text2:#000;
+    --product-radius:2px;
     --van-primary-color: var(--prim);
     --van-tabbar-item-active-color: var(--prim);
     --van-tabs-default-color: var(--prim);

src/views/Home.vue

@@ -1,6 +1,7 @@
 <template>
     <van-pull-refresh
         class="home"
+        :class="[`home-${theme}`]"
         success-text="加载成功"
         success-duration="500"
         v-model="isLoading"
@@ -8,10 +9,22 @@
         @refresh="onRefresh"
         pageType="light"
     >
+        <van-sticky ref="top" v-if="theme === 'theme6'">
+            <div class="padding-safe-top">
+                <div class="top">
+                    <div class="search" @click="$router.push('/' + $route.params.companyId + '/productSearch')">
+                        <img src="@assets/icon-sosuo.png" alt="" />
+                        <span>搜索你要的精彩</span>
+                    </div>
+                </div>
+            </div>
+        </van-sticky>
         <img src="@assets/png-shouye-guang.png" alt="" v-if="theme === 'theme2'" class="theme2-bg" />
         <img src="@assets/theme3-bg.png" alt="" v-if="theme === 'theme3'" class="theme3-bg" />
         <div class="filter-bg" :style="{ backgroundImage: `url(${bgImg})` }"></div>
 
+        <div class="home-title" v-if="theme === 'theme6'">数字艺术品</div>
+
         <div class="welcom3" v-if="theme === 'theme3'">
             <van-image
                 width="38"
@@ -46,7 +59,7 @@
                 centeredSlides
             >
                 <swiper-slide v-for="item in banners" :key="item.id">
-                    <product-small :info="item"></product-small>
+                    <banner-small :info="item"></banner-small>
                 </swiper-slide>
             </swiper>
         </template>
@@ -58,34 +71,55 @@
                 fit="cover"
                 :src="companyInfo.logo || require('@assets/img_default_photo.png')"
             ></van-image>
-        </div>
-
-        <div class="home-title" @click="goNews">
-            <span>新闻公告</span>
 
-            <div class="title-more">
-                <span>更多</span>
-                <van-icon name="icon-icon_inter" class-prefix="font_family" />
+            <div class="company-descript" v-if="theme === 'theme7'">
+                <div class="text1">{{ companyInfo.description }}</div>
+                <div class="text2">{{ companyInfo.name }}欢迎您</div>
             </div>
         </div>
 
-        <div class="newsList">
-            <news-large v-for="(item, index) in news" :key="index" v-model:info="news[index].obj"></news-large>
+        <div class="news-notice" v-if="theme === 'theme6' || theme === 'theme7'">
+            <van-notice-bar :text="newsInfo.title" @click="goNews">
+                <template #left-icon>
+                    <svg-icon iconClass="redian" class="bar-icon"></svg-icon>
+                </template>
+
+                <template #right-icon>
+                    <img src="@assets/icon_bar.png" class="right-bar" alt="" />
+                </template>
+            </van-notice-bar>
         </div>
 
-        <div class="home-title">数字艺术品</div>
+        <template v-else>
+            <div class="home-title" @click="goNews">
+                <span>新闻公告</span>
+
+                <div class="title-more">
+                    <span>更多</span>
+                    <van-icon name="icon-icon_inter" class-prefix="font_family" />
+                </div>
+            </div>
+
+            <div class="newsList">
+                <news-large v-for="(item, index) in news" :key="index" v-model:info="news[index].obj"></news-large>
+            </div>
+        </template>
+
+        <div class="home-title" v-if="theme !== 'theme6'">数字艺术品</div>
 
         <!-- <div class="tabs" v-if="!empty">
             <div class="tab" :class="{ active: active === 0 }" @click="active = 0">数字藏品</div>
             <div class="tab" :class="{ active: active === 1 }" @click="active = 1">产品新闻端</div>
         </div> -->
         <div class="listSwiper">
-            <product-large
-                v-for="(item, index) in products"
-                :key="index"
-                v-model:info="products[index].obj"
-                :type="item.type"
-            ></product-large>
+            <template v-for="(item, index) in products" :key="index">
+                <product-small
+                    v-if="theme === 'theme6'"
+                    v-model:info="products[index].obj"
+                    :type="item.type"
+                ></product-small>
+                <product-large v-else v-model:info="products[index].obj" :type="item.type"></product-large>
+            </template>
         </div>
     </van-pull-refresh>
     <van-dialog v-model:show="riskShow" theme="round-button" className="risk">
@@ -123,6 +157,7 @@ import banner from '../mixins/banner';
 import ProductLarge from '../components/product/productLarge.vue';
 import NewsLarge from '../components/product/NewsLarge.vue';
 import ProductSmall from '../components/product/productSmall.vue';
+import BannerSmall from '../components/product/BannerSmall.vue';
 import { mapState } from 'vuex';
 
 export default {
@@ -134,6 +169,7 @@ export default {
         SwiperSlide,
         ProductLarge,
         ProductSmall,
+        BannerSmall,
         NewsLarge
     },
     computed: {
@@ -161,6 +197,12 @@ export default {
                 }
             });
             return flag;
+        },
+        newsInfo() {
+            if (this.news.length > 0) {
+                return [...this.news][0].obj;
+            }
+            return {};
         }
     },
     data() {
@@ -485,35 +527,6 @@ export default {
     height: auto;
     z-index: -1;
 }
-.top {
-    display: flex;
-    padding: 9px 16px;
-    background-color: var(--bg);
-    display: flex;
-    align-items: center;
-    .logo {
-        width: 74px;
-        height: 26px;
-    }
-
-    .search {
-        flex-grow: 1;
-        background-color: @bg3;
-        display: flex;
-        align-items: center;
-        margin-left: 10px;
-        padding: 4px 20px;
-        border-radius: 21px;
-        img {
-            width: 16px;
-            height: 16px;
-            margin-right: 10px;
-        }
-        font-size: 14px;
-        color: @text3;
-        line-height: 24px;
-    }
-}
 
 .home {
     // background-color: @bg3;
@@ -587,6 +600,49 @@ export default {
     height: 42.67vw;
     overflow: hidden;
 }
+
+.home-theme6 {
+    .large-logo {
+        padding: 4px 16px 16px;
+        border-radius: 0px;
+    }
+}
+
+.home-theme7 {
+    position: relative;
+    .large-logo {
+        padding: 0 0 48px;
+        height: 53vw;
+    }
+
+    .company-descript {
+        background: var(--bg2);
+        position: absolute;
+        z-index: 2;
+        top: 40vw;
+        color: var(--text1);
+        .flex-col();
+        align-items: center;
+        left: 16px;
+        right: 16px;
+        padding: 9px 0 22px;
+        box-shadow: 0px 2px 8px 0px rgba(255, 255, 255, 0.1);
+        .text1 {
+            font-size: 20px;
+            font-weight: bold;
+            line-height: 28px;
+            text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
+        }
+
+        .text2 {
+            font-size: 12px;
+            line-height: 17px;
+            text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);
+            margin-top: 2px;
+        }
+    }
+}
+
 // .swiper-slide {
 //     width: 255px;
 // }
@@ -794,4 +850,63 @@ export default {
 .newsList {
     padding-bottom: 8px;
 }
+
+/deep/.news-notice {
+    padding: 0 16px 16px;
+    .van-notice-bar {
+        --van-notice-bar-background-color: var(--bglight);
+        --van-notice-bar-text-color: var(--info);
+        --van-notice-bar-padding: 0 10px;
+        position: relative;
+        .bar-icon {
+            width: 55px;
+            height: 16px;
+            display: block;
+            margin-right: 17px;
+            color: var(--prim);
+        }
+
+        &::before {
+            content: '';
+            position: absolute;
+            width: 1px;
+            height: 10px;
+            background: rgba(255, 255, 255, 0.2);
+            left: 73px;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+
+        .right-bar {
+            width: 18px;
+            height: 18px;
+            margin-left: 10px;
+        }
+    }
+}
+
+.top {
+    display: flex;
+    padding: 9px 16px;
+    background-color: var(--bg2);
+    display: flex;
+    align-items: center;
+
+    .search {
+        flex-grow: 1;
+        background-color: var(--bglight);
+        display: flex;
+        align-items: center;
+        padding: 4px 20px;
+        border-radius: 21px;
+        img {
+            width: 16px;
+            height: 16px;
+            margin-right: 10px;
+        }
+        font-size: 14px;
+        color: @text3;
+        line-height: 24px;
+    }
+}
 </style>

vue.config.js

@@ -36,6 +36,22 @@ module.exports = {
             args[0].app = process.env.VUE_APP_CORDOVA === 'true';
             return args;
         });
+
+        const dir = path.resolve(__dirname, './assets/icons');
+
+        config.module
+            .rule('svg-sprite')
+            .test(/\.svg$/)
+            .include.add(dir)
+            .end()
+            .use('svg-sprite-loader')
+            .loader('svg-sprite-loader')
+            .options({ extract: false })
+            .end();
+
+        config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{ plainSprite: true }]);
+
+        config.module.rule('svg').exclude.add(dir);
     },
     transpileDependencies: ['element-ui', 'swiper', 'ssr-window', 'dom7', 'vue-awesome-swiper', 'vuex'],
     runtimeCompiler: true,

yarn.lock

@@ -2030,6 +2030,11 @@ ansi-regex@^5.0.1:
   resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
+ansi-styles@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
+  integrity sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==
+
 ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
@@ -2398,7 +2403,7 @@ bindings@^1.5.0:
   dependencies:
     file-uri-to-path "1.0.0"
 
-bluebird@^3.1.1, bluebird@^3.5.5:
+bluebird@^3.1.1, bluebird@^3.5.0, bluebird@^3.5.5:
   version "3.7.2"
   resolved "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
@@ -2464,7 +2469,7 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
-braces@^2.3.1, braces@^2.3.2:
+braces@^2.2.2, braces@^2.3.1, braces@^2.3.2:
   version "2.3.2"
   resolved "https://registry.npmjs.org/braces/-/braces-2.3.2.tgz"
   integrity sha512-aNdbnj9P8PjdXU4ybaWLK2IF3jc/EoDYbC7AazW6to3TRsfXxscC9UXOB5iDiEQrkyIbWp2SLQda4+QAa7nc3w==
@@ -2736,6 +2741,17 @@ caseless@~0.12.0:
   resolved "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz"
   integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
 
+chalk@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
+  integrity sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==
+  dependencies:
+    ansi-styles "^2.2.1"
+    escape-string-regexp "^1.0.2"
+    has-ansi "^2.0.0"
+    strip-ansi "^3.0.0"
+    supports-color "^2.0.0"
+
 chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz"
@@ -3572,6 +3588,11 @@ deep-is@~0.1.3:
   resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
+deepmerge@1.3.2:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.3.2.tgz#1663691629d4dbfe364fa12a2a4f0aa86aa3a050"
+  integrity sha512-qjMjTrk+RKv/sp4RPDpV5CnKhxjFI9p+GkLBOls5A8EEElldYWCWA9zceAkmfd0xIo2aU1nxiaLFoiya2sb6Cg==
+
 deepmerge@^1.2.0, deepmerge@^1.5.2:
   version "1.5.2"
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-1.5.2.tgz"
@@ -3787,7 +3808,7 @@ domain-browser@^1.1.1:
   resolved "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz"
   integrity sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==
 
-domelementtype@1:
+domelementtype@1, domelementtype@^1.3.1:
   version "1.3.1"
   resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz"
   integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
@@ -3797,6 +3818,13 @@ domelementtype@^2.0.1, domelementtype@^2.2.0:
   resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz"
   integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
 
+domhandler@^2.3.0:
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
+  integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==
+  dependencies:
+    domelementtype "1"
+
 domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz"
@@ -3804,7 +3832,12 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.0:
   dependencies:
     domelementtype "^2.2.0"
 
-domutils@^1.7.0:
+domready@1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/domready/-/domready-1.0.8.tgz#91f252e597b65af77e745ae24dd0185d5e26d58c"
+  integrity sha512-uIzsOJUNk+AdGE9a6VDeessoMCzF8RrZvJCX/W8QtyfgdR6Uofn/MvRonih3OtCO79b2VDzDOymuiABrQ4z3XA==
+
+domutils@^1.5.1, domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz"
   integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg==
@@ -3979,6 +4012,11 @@ enhanced-resolve@^4.5.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
+entities@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56"
+  integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==
+
 entities@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz"
@@ -4060,7 +4098,7 @@ escape-latex@^1.2.0:
   resolved "https://registry.npmjs.org/escape-latex/-/escape-latex-1.2.0.tgz"
   integrity sha512-nV5aVWW1K0wEiUIEdZ4erkGGH8mDxGyxSeqPzRNtWP7ataw+/olFObw7hujFWlVjNsaDFw5VZ5NzVSIqRgfTiw==
 
-escape-string-regexp@^1.0.5:
+escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@@ -4393,7 +4431,7 @@ external-editor@^3.0.3:
     iconv-lite "^0.4.24"
     tmp "^0.0.33"
 
-extglob@^2.0.4:
+extglob@^2.0.2, extglob@^2.0.4:
   version "2.0.4"
   resolved "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz"
   integrity sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==
@@ -4926,11 +4964,23 @@ har-validator@~5.1.3:
     ajv "^6.12.3"
     har-schema "^2.0.0"
 
+has-ansi@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
+  integrity sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==
+  dependencies:
+    ansi-regex "^2.0.0"
+
 has-bigints@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.1.tgz"
   integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
 
+has-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa"
+  integrity sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA==
+
 has-flag@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz"
@@ -5018,7 +5068,7 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
-he@1.2.x:
+he@1.2.x, he@^1.1.1:
   version "1.2.0"
   resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -5121,6 +5171,18 @@ html2canvas@^1.3.2:
     css-line-break "^2.1.0"
     text-segmentation "^1.0.3"
 
+htmlparser2@^3.8.3:
+  version "3.10.1"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f"
+  integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==
+  dependencies:
+    domelementtype "^1.3.1"
+    domhandler "^2.3.0"
+    domutils "^1.5.1"
+    entities "^1.1.1"
+    inherits "^2.0.1"
+    readable-stream "^3.1.1"
+
 htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz"
@@ -5269,7 +5331,7 @@ ignore@^4.0.3, ignore@^4.0.6:
   resolved "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
 
-image-size@~0.5.0:
+image-size@^0.5.1, image-size@~0.5.0:
   version "0.5.5"
   resolved "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz"
   integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
@@ -5656,7 +5718,7 @@ is-path-inside@^2.1.0:
   dependencies:
     path-is-inside "^1.0.2"
 
-is-plain-obj@^1.0.0:
+is-plain-obj@^1.0.0, is-plain-obj@^1.1:
   version "1.1.0"
   resolved "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz"
   integrity sha1-caUMhCnfync8kqOQpKA7OfzVHT4=
@@ -5773,7 +5835,7 @@ isexe@^2.0.0:
   resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
   integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
 
-isobject@^2.0.0:
+isobject@^2.0.0, isobject@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz"
   integrity sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=
@@ -5800,7 +5862,7 @@ javascript-stringify@^2.0.1:
   resolved "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz"
   integrity sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==
 
-js-base64@^2.5.2:
+js-base64@^2.1.9, js-base64@^2.5.2:
   version "2.6.4"
   resolved "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz"
   integrity sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==
@@ -5940,7 +6002,7 @@ kind-of@^4.0.0:
   dependencies:
     is-buffer "^1.1.5"
 
-kind-of@^5.0.0:
+kind-of@^5.0.0, kind-of@^5.0.2:
   version "5.1.0"
   resolved "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz"
   integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
@@ -6237,6 +6299,13 @@ merge-descriptors@1.0.1, merge-descriptors@^1.0.1:
   resolved "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz"
   integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
 
+merge-options@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-options/-/merge-options-1.0.1.tgz#2a64b24457becd4e4dc608283247e94ce589aa32"
+  integrity sha512-iuPV41VWKWBIOpBsjoxjDZw8/GbSfZ2mk7N1453bwMrfzdrIk7EzBd+8UVR6rkw67th7xnk9Dytl3J+lHPdxvg==
+  dependencies:
+    is-plain-obj "^1.1"
+
 merge-source-map@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz"
@@ -6259,6 +6328,25 @@ methods@~1.1.2:
   resolved "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz"
   integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
 
+micromatch@3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.0.tgz#5102d4eaf20b6997d6008e3acfe1c44a3fa815e2"
+  integrity sha512-3StSelAE+hnRvMs8IdVW7Uhk8CVed5tp+kLLGlBP6WiRAXS21GPGu/Nat4WNPXj2Eoc24B02SaeoyozPMfj0/g==
+  dependencies:
+    arr-diff "^4.0.0"
+    array-unique "^0.3.2"
+    braces "^2.2.2"
+    define-property "^1.0.0"
+    extend-shallow "^2.0.1"
+    extglob "^2.0.2"
+    fragment-cache "^0.2.1"
+    kind-of "^5.0.2"
+    nanomatch "^1.2.1"
+    object.pick "^1.3.0"
+    regex-not "^1.0.0"
+    snapdragon "^0.8.1"
+    to-regex "^3.0.1"
+
 micromatch@^3.1.10, micromatch@^3.1.4:
   version "3.1.10"
   resolved "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz"
@@ -6381,6 +6469,11 @@ mississippi@^3.0.0:
     stream-each "^1.1.0"
     through2 "^2.0.0"
 
+mitt@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/mitt/-/mitt-1.1.2.tgz#380e61480d6a615b660f07abb60d51e0a4e4bed6"
+  integrity sha512-3btxP0O9iGADGWAkteQ8mzDtEspZqu4I32y4GZYCV5BrwtzdcRpF4dQgNdJadCrbBx7Lu6Sq9AVrerMHR0Hkmw==
+
 mitt@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz"
@@ -6481,7 +6574,7 @@ nanoid@^3.2.0:
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz"
   integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
 
-nanomatch@^1.2.9:
+nanomatch@^1.2.1, nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz"
   integrity sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA==
@@ -7466,6 +7559,11 @@ postcss-ordered-values@^4.1.2:
     postcss "^7.0.0"
     postcss-value-parser "^3.0.0"
 
+postcss-prefix-selector@^1.6.0:
+  version "1.16.0"
+  resolved "https://registry.yarnpkg.com/postcss-prefix-selector/-/postcss-prefix-selector-1.16.0.tgz#ad5b56f9a73a2c090ca7161049632c9d89bcb404"
+  integrity sha512-rdVMIi7Q4B0XbXqNUEI+Z4E+pueiu/CS5E6vRCQommzdQ/sgsS4dK42U7GX8oJR+TJOtT+Qv3GkNo6iijUMp3Q==
+
 postcss-reduce-initial@^4.0.3:
   version "4.0.3"
   resolved "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz"
@@ -7531,6 +7629,16 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
+postcss@^5.2.17:
+  version "5.2.18"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
+  integrity sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==
+  dependencies:
+    chalk "^1.1.3"
+    js-base64 "^2.1.9"
+    source-map "^0.5.6"
+    supports-color "^3.2.3"
+
 postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.39"
   resolved "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz"
@@ -7548,6 +7656,44 @@ postcss@^8.1.10:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+posthtml-parser@^0.2.0, posthtml-parser@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.2.1.tgz#35d530de386740c2ba24ff2eb2faf39ccdf271dd"
+  integrity sha512-nPC53YMqJnc/+1x4fRYFfm81KV2V+G9NZY+hTohpYg64Ay7NemWWcV4UWuy/SgMupqQ3kJ88M/iRfZmSnxT+pw==
+  dependencies:
+    htmlparser2 "^3.8.3"
+    isobject "^2.1.0"
+
+posthtml-rename-id@^1.0:
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/posthtml-rename-id/-/posthtml-rename-id-1.0.12.tgz#cf7f6eb37146bf1afac31e68f18c6cc19ae61433"
+  integrity sha512-UKXf9OF/no8WZo9edRzvuMenb6AD5hDLzIepJW+a4oJT+T/Lx7vfMYWT4aWlGNQh0WMhnUx1ipN9OkZ9q+ddEw==
+  dependencies:
+    escape-string-regexp "1.0.5"
+
+posthtml-render@^1.0.5, posthtml-render@^1.0.6:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/posthtml-render/-/posthtml-render-1.4.0.tgz#40114070c45881cacb93347dae3eff53afbcff13"
+  integrity sha512-W1779iVHGfq0Fvh2PROhCe2QhB8mEErgqzo1wpIt36tCgChafP+hbXIhLDOM8ePJrZcFs0vkNEtdibEWVqChqw==
+
+posthtml-svg-mode@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/posthtml-svg-mode/-/posthtml-svg-mode-1.0.3.tgz#abd554face81223cab0cb367e18e4efd2a4e74b0"
+  integrity sha512-hEqw9NHZ9YgJ2/0G7CECOeuLQKZi8HjWLkBaSVtOWjygQ9ZD8P7tqeowYs7WrFdKsWEKG7o+IlsPY8jrr0CJpQ==
+  dependencies:
+    merge-options "1.0.1"
+    posthtml "^0.9.2"
+    posthtml-parser "^0.2.1"
+    posthtml-render "^1.0.6"
+
+posthtml@^0.9.2:
+  version "0.9.2"
+  resolved "https://registry.yarnpkg.com/posthtml/-/posthtml-0.9.2.tgz#f4c06db9f67b61fd17c4e256e7e3d9515bf726fd"
+  integrity sha512-spBB5sgC4cv2YcW03f/IAUN1pgDJWNWD8FzkyY4mArLUMJW+KlQhlmUdKAHQuPfb00Jl5xIfImeOsf6YL8QK7Q==
+  dependencies:
+    posthtml-parser "^0.2.0"
+    posthtml-render "^1.0.5"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz"
@@ -7729,7 +7875,7 @@ qs@~6.5.2:
   resolved "https://registry.npmjs.org/qs/-/qs-6.5.3.tgz"
   integrity sha512-qxXIEh4pCGfHICj1mAJQ2/2XVZkjCDTcEgfoSQxc/fYivUZxTkk7L3bDBJSoNrEzXI17oUO5Dp07ktqE5KzczA==
 
-query-string@^4.1.0:
+query-string@^4.1.0, query-string@^4.3.2:
   version "4.3.4"
   resolved "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz"
   integrity sha1-u7aTucqRXCMlFbIosaArYJBD2+s=
@@ -7832,7 +7978,7 @@ readable-stream@1.1.x:
     isarray "0.0.1"
     string_decoder "~0.10.x"
 
-readable-stream@^3.0.6, readable-stream@^3.6.0:
+readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.6.0:
   version "3.6.0"
   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz"
   integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
@@ -8721,7 +8867,7 @@ string_decoder@~0.10.x:
   resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz"
   integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
 
-strip-ansi@^3.0.1:
+strip-ansi@^3.0.0, strip-ansi@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz"
   integrity sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=
@@ -8781,6 +8927,18 @@ stylehacks@^4.0.0:
     postcss "^7.0.0"
     postcss-selector-parser "^3.0.0"
 
+supports-color@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
+  integrity sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==
+
+supports-color@^3.2.3:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6"
+  integrity sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==
+  dependencies:
+    has-flag "^1.0.0"
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
@@ -8807,6 +8965,48 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+svg-baker-runtime@^1.4.7:
+  version "1.4.7"
+  resolved "https://registry.yarnpkg.com/svg-baker-runtime/-/svg-baker-runtime-1.4.7.tgz#f4720637f5b6202eef6378d81f1fead0815f8a4e"
+  integrity sha512-Zorfwwj5+lWjk/oxwSMsRdS2sPQQdTmmsvaSpzU+i9ZWi3zugHLt6VckWfnswphQP0LmOel3nggpF5nETbt6xw==
+  dependencies:
+    deepmerge "1.3.2"
+    mitt "1.1.2"
+    svg-baker "^1.7.0"
+
+svg-baker@^1.5.0, svg-baker@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/svg-baker/-/svg-baker-1.7.0.tgz#8367f78d875550c52fe4756f7303d5c5d7c2e9a7"
+  integrity sha512-nibslMbkXOIkqKVrfcncwha45f97fGuAOn1G99YwnwTj8kF9YiM6XexPcUso97NxOm6GsP0SIvYVIosBis1xLg==
+  dependencies:
+    bluebird "^3.5.0"
+    clone "^2.1.1"
+    he "^1.1.1"
+    image-size "^0.5.1"
+    loader-utils "^1.1.0"
+    merge-options "1.0.1"
+    micromatch "3.1.0"
+    postcss "^5.2.17"
+    postcss-prefix-selector "^1.6.0"
+    posthtml-rename-id "^1.0"
+    posthtml-svg-mode "^1.0.3"
+    query-string "^4.3.2"
+    traverse "^0.6.6"
+
+svg-sprite-loader@^6.0.11:
+  version "6.0.11"
+  resolved "https://registry.yarnpkg.com/svg-sprite-loader/-/svg-sprite-loader-6.0.11.tgz#a4d60cee3d74232a2c17d31c73a2008295f61220"
+  integrity sha512-TedsTf8wsHH6HgdwKjUveDZRC6q5gPloYV8A8/zZaRWP929J7x6TzQ6MvZFl+YYDJuJ0Akyuu/vNVJ+fbPuYXg==
+  dependencies:
+    bluebird "^3.5.0"
+    deepmerge "1.3.2"
+    domready "1.0.8"
+    escape-string-regexp "1.0.5"
+    loader-utils "^1.1.0"
+    svg-baker "^1.5.0"
+    svg-baker-runtime "^1.4.7"
+    url-slug "2.0.0"
+
 svg-tags@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz"
@@ -9025,6 +9225,11 @@ tough-cookie@~2.5.0:
     psl "^1.1.28"
     punycode "^2.1.1"
 
+traverse@^0.6.6:
+  version "0.6.7"
+  resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.7.tgz#46961cd2d57dd8706c36664acde06a248f1173fe"
+  integrity sha512-/y956gpUo9ZNCb99YjxG7OaslxZWHfCHAUUfshwqOXmxUIvqLjVO581BT+gM59+QV9tFe6/CGG53tsA1Y7RSdg==
+
 tryer@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz"
@@ -9150,6 +9355,11 @@ unicode-property-aliases-ecmascript@^2.0.0:
   resolved "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.0.0.tgz"
   integrity sha512-5Zfuy9q/DFr4tfO7ZPeVXb1aPoeQSdeFMLpYuFebehDAhbuevLs5yxSZmIFN1tP5F9Wl4IpJrYojg85/zgyZHQ==
 
+unidecode@0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/unidecode/-/unidecode-0.1.8.tgz#efbb301538bc45246a9ac8c559d72f015305053e"
+  integrity sha512-SdoZNxCWpN2tXTCrGkPF/0rL2HEq+i2gwRG1ReBvx8/0yTzC3enHfugOf8A9JBShVwwrRIkLX0YcDUGbzjbVCA==
+
 union-value@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz"
@@ -9246,6 +9456,13 @@ url-parse@^1.4.3, url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+url-slug@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/url-slug/-/url-slug-2.0.0.tgz#a789d5aed4995c0d95af33377ad1d5c68d4d7027"
+  integrity sha512-aiNmSsVgrjCiJ2+KWPferjT46YFKoE8i0YX04BlMVDue022Xwhg/zYlnZ6V9/mP3p8Wj7LEp0myiTkC/p6sxew==
+  dependencies:
+    unidecode "0.1.8"
+
 url@^0.11.0:
   version "0.11.0"
   resolved "https://registry.npmjs.org/url/-/url-0.11.0.tgz"