详情

.env.development

@@ -1 +1 @@
-VUE_APP_BASE_URL=https://jiashanxia.izouma.com
+VUE_APP_BASE_URL=http://192.168.50.104:8080

src/components/productCard.vue

@@ -0,0 +1,251 @@
+<template>
+    <van-popup
+        :show="show"
+        round
+        position="bottom"
+        custom-style="padding : 16px"
+        @close="onClose"
+        @click-overlay="onClose"
+    >
+        <div class="product">
+            <img :src="img" class="icon" />
+            <div class="right">
+                <div class="price">
+                    <price-tag :key="index" color="red" :value="stockInfo.price"></price-tag>
+                    <span class="sub" v-if="stockInfo.originalPrice">门市价¥{{ stockInfo.originalPrice }}</span>
+                </div>
+            </div>
+        </div>
+        <scroll-view scroll-y class="modules">
+            <div class="module">
+                <div class="name">规格</div>
+                <div class="content">
+                    <button
+                        v-for="(item, index) in specificationList"
+                        :class="{ active: chooseSpecification === item }"
+                        @click="chooseSpecification = item"
+                        :key="index"
+                    >
+                        {{ item }}
+                    </button>
+                </div>
+            </div>
+
+            <div class="module" v-if="dayList.length > 0">
+                <div class="name">日期</div>
+                <div class="content">
+                    <button
+                        v-for="(item, index) in dayList"
+                        :class="{ active: chooseDay === item }"
+                        @click="chooseDay = item"
+                        :key="index"
+                    >
+                        {{ item }}
+                    </button>
+                </div>
+            </div>
+
+            <div class="module num">
+                <div class="name">数量</div>
+                <div class="content">
+                    <stepper noChosse goods></stepper>
+                </div>
+            </div>
+        </scroll-view>
+        <div class="bottom"></div>
+        <div class="button">
+            <button @click="chooseId">立即购买</button>
+        </div>
+    </van-popup>
+</template>
+
+<script>
+import Stepper from './stepper';
+export default {
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        stockId: {
+            type: [Number, String],
+            default: 0
+        },
+        num: {
+            type: Number,
+            default: 1
+        },
+        show: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data() {
+        return {
+            chooseSpecification: '',
+            chooseDay: ''
+        };
+    },
+    watch: {
+        chooseSpecification() {
+            this.chooseDay = '';
+        }
+    },
+    computed: {
+        stocks() {
+            return [...(this.info.stocks || [])] || [];
+        },
+        specificationList() {
+            return [
+                ...new Set(
+                    [...this.stocks].map(item => {
+                        return item.specification;
+                    }) || []
+                )
+            ];
+        },
+        dayList() {
+            return (
+                [...this.stocks]
+                    .filter(item => {
+                        return item.specification === this.chooseSpecification;
+                    })
+                    .map(item => {
+                        return item.day;
+                    }) || []
+            );
+        },
+        stockInfo() {
+            if (this.chooseSpecification && this.chooseDay) {
+                return (
+                    [...this.stocks].find(item => {
+                        return item.specification === this.chooseSpecification && item.day === this.chooseDay;
+                    }) || {}
+                );
+            } else if (this.stocks.length > 0) {
+                return this.stocks[0];
+            } else {
+                return {};
+            }
+        },
+        img() {
+            return [...(this.info.img || [])].shift() || '';
+        },
+        amount() {
+            return (this.info.amount || '').split('-');
+        }
+    },
+    methods: {
+        onClose() {
+            this.$emit('update:show', false);
+        },
+        chooseId() {
+            this.$nextTick(() => {
+                this.$emit('update:stockId', this.stockInfo.id);
+                this.onClose();
+            });
+        }
+    },
+    components: {
+        Stepper
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.modules {
+    .module {
+        padding: 20px 0 12px;
+        .name {
+            font-size: 13px;
+            font-weight: bold;
+            color: #000000;
+            line-height: 24px;
+        }
+
+        .content {
+            .flex();
+            flex-wrap: wrap;
+            button {
+                padding: 10px 12px;
+                font-size: 13px;
+                color: #000000;
+                line-height: 24px;
+                margin-right: 12px;
+                border-radius: 6px;
+                border: 1px solid #f2f3f5;
+                margin-top: 10px;
+
+                &.active {
+                    background: rgba(255, 127, 31, 0.06);
+                    border: 1px solid @prim;
+                    color: @prim;
+                }
+            }
+        }
+
+        &.num {
+            .flex();
+            justify-content: space-between;
+        }
+    }
+}
+
+.product {
+    .flex();
+    .icon {
+        width: 80px;
+        height: 80px;
+        border-radius: 8px;
+    }
+    .right {
+        flex-grow: 1;
+        margin-left: 12px;
+    }
+    .price {
+        .flex();
+        span {
+            &.red {
+                font-size: 22px;
+                font-family: OSP-DIN;
+                color: #f53809;
+                line-height: 26px;
+                margin: 0 3px;
+            }
+
+            &.sub {
+                font-size: 14px;
+                color: #c8c9cc;
+                line-height: 24px;
+                margin-left: 8px;
+                align-self: flex-end;
+                text-decoration: line-through;
+            }
+        }
+    }
+}
+.bottom {
+    height: calc(86px + env(safe-area-inset-bottom));
+}
+.button {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    padding: 8px 48px calc(8px + env(safe-area-inset-bottom));
+
+    box-shadow: 0px -1px 2px 0px rgba(0, 0, 0, 0.04);
+    button {
+        height: 44px;
+        background: #ff7f1f;
+        border-radius: 8px;
+        font-size: 16px;
+        font-weight: bold;
+        color: #ffffff;
+        line-height: 44px;
+        border-radius: 8px;
+    }
+}
+</style>

src/components/stepper.vue

@@ -1,22 +1,35 @@
 <template>
     <div class="stepper">
-        <img class="icon" @click="min" src="../static/imgs/icon_min.png" v-if="mValue !== 0" />
+        <img class="icon" v-if="goods && noChosse" src="../static/svgs/icon-reduce.svg" />
+        <img class="icon" @click="min" src="../static/imgs/icon_min.png" v-else-if="mValue !== 0" />
         <div class="value" v-if="mValue !== 0">{{ mValue }}</div>
-        <img class="icon" v-if="mValue === max" src="../static/imgs/icon_add_disable.png" />
+        <img class="icon" v-if="goods && noChosse" src="../static/svgs/icon-add.svg" />
+        <img class="icon" v-else-if="mValue === max" src="../static/imgs/icon_add_disable.png" />
         <img class="icon" v-else @click="add" src="../static/imgs/icon_add.png" />
     </div>
 </template>
 <script>
 export default {
-    props: ['value', 'max'],
+    props: {
+        value: {},
+        max: {},
+        noChosse: {
+            type: Boolean,
+            default: true
+        },
+        goods: {
+            type: Boolean,
+            default: false
+        }
+    },
     created() {
         if (this.value) {
-            this.mValue = Number(this.value) || 0;
+            this.mValue = Number(this.value) || 1;
         }
     },
     data() {
         return {
-            mValue: 0
+            mValue: 1
         };
     },
     methods: {
@@ -45,20 +58,23 @@ export default {
 .stepper {
     .flex();
     .icon {
-        width: 32px;
-        min-width: 32px;
-        height: 32px;
+        width: 36px;
+        min-width: 36px;
+        height: 36px;
     }
     .value {
-        width: 32px;
         min-width: 32px;
-        height: 32px;
+        height: 36px;
         .flex();
         justify-content: center;
         color: black;
-        font-size: 16px;
+        font-size: 14px;
         font-weight: bold;
-        font-weight: 500;
+        line-height: 20px;
+        background: #f5f7fa;
+        border-radius: 6px;
+        margin: 0 6px;
+        padding: 0 10px;
     }
 }
 </style>

src/pages/detail.vue

@@ -23,21 +23,140 @@
                 </swiper-item>
             </swiper>
             <div class="bg"></div>
-            <div class="title">
-                <div class="content">{{ packageInfo.name }}</div>
-                <button class="btn-share" open-type="share">
-                    <img src="../static/imgs/icon_share.png" class="icon-share" />
-                </button>
+            <div class="card top">
+                <div class="price">
+                    <block v-for="(item, index) in amount" :key="index">
+                        <price-tag color="red" :value="item"></price-tag>
+                        <span class="red" v-if="index === 0">-</span>
+                    </block>
+
+                    <span class="sub" v-if="packageInfo.originalPrice">门市价¥{{ packageInfo.originalPrice }}</span>
+                </div>
+                <div class="title">
+                    <div class="content">{{ packageDetail.name }}</div>
+                    <!-- <button class="btn-share" open-type="share">
+                        <img src="../static/imgs/icon_share.png" class="icon-share" />
+                    </button> -->
+                </div>
+                <div class="desc">{{ packageDetail.title }}</div>
+
+                <div class="info">
+                    <span>已售 {{ packageDetail.sale || 0 }}</span>
+                    <span>库存 {{ packageDetail.inventory || 0 }}</span>
+                    <span>{{ packageDetail.shareNum || 0 }}人分享</span>
+                </div>
+
+                <!-- <div class="feature">
+                    <div class="label">特点</div>
+                    <div class="tag" v-for="item in packageInfo.tag" :key="item">{{ item }}</div>
+                </div> -->
             </div>
-            <div class="desc">{{ packageInfo.title }}</div>
-            <div class="price">
-                <price-tag color="red" :value="packageInfo.amount"></price-tag>
+
+            <div class="card choose">
+                <div class="choose-spec" @click="showSpec = true">
+                    <div class="name">选择</div>
+                    <div class="content">
+                        <span class="active" v-if="stockInfo">{{ stockInfo.specification }}({{ stockInfo.day }})</span>
+                        <span v-else>规格/日期</span>
+                        <img src="../static/imgs/icon_into.png" class="into" />
+                    </div>
+                </div>
+                <div class="choose-spec">
+                    <div class="name">服务</div>
+                    <div class="content">
+                        <div class="serviece">
+                            <img src="../static/svgs/icon_01_zhengpin.svg" alt="" />
+                            <span>正品保障</span>
+                        </div>
+                        <div class="serviece">
+                            <img src="../static/svgs/icon_01_guanfang.svg" alt="" />
+                            <span>官方直营</span>
+                        </div>
+                        <div class="serviece">
+                            <img src="../static/svgs/icon_03_wuyou.svg" alt="" />
+                            <span>无忧售后</span>
+                        </div>
+                    </div>
+                </div>
             </div>
-            <div class="feature">
-                <div class="label">特点</div>
-                <div class="tag" v-for="item in packageInfo.tag" :key="item">{{ item }}</div>
+
+            <div class="card">
+                <div class="card-title">商家信息</div>
+
+                <div class="attraction">
+                    <img class="icon" :src="attraction.img" alt="" />
+                    <div class="attraction-info">
+                        <div class="title">
+                            {{ attraction.name }}
+                        </div>
+                        <!-- <div class="sub">{{ attraction.introduction }}</div> -->
+                    </div>
+
+                    <button>
+                        <img src="../static/svgs/icon_xiangqingye_dianhua.svg" />
+                        <span>联系</span>
+                    </button>
+                </div>
             </div>
+
             <div class="card">
+                <div class="card-title">活动详情</div>
+                <rich-text class="rich-text" :nodes="packageInfo.detail"></rich-text>
+
+                <div class="workflow">
+                    <div class="workflow-item" v-for="(item, index) in workflow" :key="index">
+                        <div class="name">{{ item.name }}</div>
+                        <div class="desc">{{ item.desc }}</div>
+
+                        <swiper class="workflow-cover" v-if="item.img.length > 0">
+                            <swiper-item v-for="item in item.img" :key="item">
+                                <img class="cover-img" mode="aspectFill" :src="item" />
+                            </swiper-item>
+                        </swiper>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card note">
+                <div class="card-title">购买须知</div>
+
+                <div class="note-info">
+                    <div class="name">活动日期</div>
+                    <div class="val">{{ event.date }}</div>
+                    <img class="icon" src="../static/svgs/icon_xuzhi_youxiaoqi.svg" />
+                </div>
+
+                <div class="note-info">
+                    <div class="name">活动时间</div>
+                    <div class="val">{{ event.time }}</div>
+                    <img class="icon" src="../static/svgs/icon_xuzhi_shijian.svg" />
+                </div>
+
+                <div class="note-info">
+                    <div class="name">活动地点</div>
+                    <div class="val">{{ event.address }}</div>
+                    <img class="icon" src="../static/svgs/icon_xuzhi_didian.svg" />
+                </div>
+                <div class="note-info">
+                    <div class="name">活动对象</div>
+                    <div class="val">{{ event.crowd }}</div>
+                    <img class="icon" src="../static/svgs/icon_xuzhi_shijian.svg" />
+                </div>
+
+                <div class="note-info">
+                    <div class="name">费用说明</div>
+                    <div class="val" v-html="packageDetail.expenseDescription"></div>
+                    <img class="icon" src="../static/svgs/icon_xuzhi_guize.svg" />
+                </div>
+            </div>
+
+            <div class="card note">
+                <div class="card-title">注意事项</div>
+
+                <div class="tips" v-html="packageDetail.note"></div>
+            </div>
+
+            <!-- <div class="card">
                 <div class="card-title">套餐内容</div>
                 <div class="table">
                     <div class="row head">
@@ -63,14 +182,12 @@
             </div>
             <div class="card">
                 <div class="card-title">使用方式</div>
-                <div class="content">
+                <div class="card-content">
                     套餐购买成功后，套餐内的所有项目数量会计入我的项目余额中，在“我的-项目余额”中可查看，使用时，打开“我的核销码”给核销人员，核销人员会根据你本次需要消耗的具体项目及数量进行核销
                 </div>
             </div>
             <div class="tip">温馨提示：由于会员套餐特殊性，出售后不可退款！</div>
-            <div style="padding: 0 16px; margin-top: 30px;">
-                <rich-text class="rich-text" :nodes="packageInfo.detail"></rich-text>
-            </div>
+            <div style="padding: 0 16px; margin-top: 30px;"></div> -->
             <div style="height: 70px;"></div>
         </div>
         <navigation-bar
@@ -79,15 +196,18 @@
             :transparent="transparent"
             isCircles
         ></navigation-bar>
-        <div class="bottom-wrapper">
+        <!-- <div class="bottom-wrapper">
             <div class="btn-large" @click="buy">立即购买</div>
-        </div>
+        </div> -->
+
+        <product-card :info="packageInfo" :show.sync="showSpec" :stockId.sync="stockId"></product-card>
     </scroll-view>
 </template>
 <script>
 import NavigationBar from '../components/navigationBar.vue';
+import ProductCard from '../components/productCard.vue';
 export default {
-    components: { NavigationBar },
+    components: { NavigationBar, ProductCard },
     data() {
         return {
             title: '',
@@ -97,14 +217,34 @@ export default {
                 img: []
             },
             packageGoods: [],
-            leftIcon: 'back'
+            leftIcon: 'back',
+            amount: [],
+            showSpec: false,
+            attraction: {},
+            packageDetail: {},
+            stockId: 0
         };
     },
     onShow() {
-        this.$http.get(`/package/get/${this.$mp.query.id}`).then(res => {
+        this.$http.get(`/package/getVO/${this.$mp.query.id}`).then(res => {
             this.packageInfo = res;
             this.title = res.name;
+
+            this.amount = res.amount.split('-');
         });
+
+        this.$http
+            .get(`/package/get/${this.$mp.query.id}`)
+            .then(res => {
+                this.packageDetail = res;
+                return this.$http.get(`/attractions/get/${res.attractionsId}`);
+            })
+            .then(res => {
+                res.img = res.img.shift() || '';
+                this.attraction = res;
+            });
+
+        // this.$http.get(`/attractions/get/${}`)
         this.$http.postJson('/packageGoods/all', { size: 10000, query: { packageId: this.$mp.query.id } }).then(res => {
             this.packageGoods = res.content;
         });
@@ -119,6 +259,28 @@ export default {
     computed: {
         sum() {
             return this.packageGoods.map(i => i.price).reduce((a, b) => a + b, 0);
+        },
+        workflow() {
+            if (this.packageInfo.workflow) {
+                return JSON.parse(this.packageInfo.workflow);
+            } else {
+                return [];
+            }
+        },
+        event() {
+            return this.packageDetail.event || {};
+        },
+        stocks() {
+            return this.packageInfo.stocks || [];
+        },
+        stockInfo() {
+            if (this.stockId) {
+                return [...this.stocks].find(item => {
+                    return item.id === this.stockId;
+                });
+            } else {
+                return null;
+            }
         }
     },
     methods: {
@@ -194,17 +356,15 @@ export default {
     z-index: -1;
 }
 .title {
-    margin: 18px 16px 0 16px;
+    margin: 13px 0 0;
     .flex();
     align-items: flex-start;
     .content {
         color: black;
-        font-size: 22px;
+        font-size: 20px;
         font-weight: bold;
-        font-weight: 500;
-        margin-right: 10px;
         flex-grow: 1;
-        line-height: 30px;
+        line-height: 24px;
     }
     .btn-share {
         width: 24px;
@@ -220,12 +380,41 @@ export default {
     }
 }
 .desc {
-    margin: 4px 0 0 16px;
+    margin: 4px 0 0;
     font-size: 14px;
     color: @text3;
+    line-height: 24px;
+}
+
+.info {
+    .flex();
+    justify-content: space-between;
+    font-size: 14px;
+    color: #c8c9cc;
+    line-height: 24px;
+    margin-top: 10px;
 }
 .price {
-    margin: 18px 0 0 16px;
+    margin: 18px 0 0;
+    .flex();
+    span {
+        &.red {
+            font-size: 22px;
+            font-family: OSP-DIN;
+            color: #f53809;
+            line-height: 26px;
+            margin: 0 3px;
+        }
+
+        &.sub {
+            font-size: 14px;
+            color: #c8c9cc;
+            line-height: 24px;
+            margin-left: 8px;
+            align-self: flex-end;
+            text-decoration: line-through;
+        }
+    }
 }
 .feature {
     .flex();
@@ -252,15 +441,19 @@ export default {
     }
 }
 .card {
-    margin: 10px 16px 0 16px;
+    margin: 10px 0;
     background: #ffffff;
-    border-radius: 8px;
-    padding: 16px 16px 20px 16px;
+    border-radius: 16px;
+    padding: 16px;
+    transform: translateY(-14px);
+
+    &.top {
+        margin: 0 0;
+    }
     .card-title {
         font-size: 18px;
         color: black;
         font-weight: bold;
-        font-weight: 500;
     }
     .table {
         margin-top: 16px;
@@ -289,7 +482,7 @@ export default {
             }
         }
     }
-    .content {
+    .card-content {
         margin-top: 10px;
         font-size: 14px;
         color: black;
@@ -335,4 +528,215 @@ export default {
     border-radius: 8px;
     margin-top: 8px;
 }
+.choose {
+    padding: 0 16px;
+}
+.choose-spec {
+    .flex();
+    height: 70px;
+    position: relative;
+    .name {
+        font-size: 13px;
+        font-weight: bold;
+        color: #000000;
+        line-height: 24px;
+    }
+
+    .content {
+        flex-grow: 1;
+        margin-left: 42px;
+        .flex();
+        .into {
+            width: 7px;
+            height: 14px;
+            margin-left: 22px;
+        }
+
+        span {
+            font-size: 14px;
+            color: #c8c9cc;
+            line-height: 24px;
+            flex-grow: 1;
+
+            &.active {
+                font-size: 14px;
+                color: #000000;
+                line-height: 24px;
+            }
+        }
+
+        .serviece {
+            .flex();
+            &:not(:first-child) {
+                margin-left: 20px;
+            }
+            img {
+                width: 16px;
+                height: 16px;
+            }
+            span {
+                margin-left: 5px;
+                font-size: 12px;
+                color: #939599;
+                line-height: 22px;
+            }
+        }
+    }
+
+    &:not(:last-child) {
+        &:after {
+            content: '';
+            background-color: #f5f7fa;
+            height: 1px;
+            position: absolute;
+            left: 56px;
+            right: 0px;
+            bottom: 0;
+        }
+    }
+}
+.attraction {
+    padding: 12px 0 0;
+    position: relative;
+    .flex();
+    align-items: flex-start;
+    .icon {
+        width: 44px;
+        height: 44px;
+        min-width: 44px;
+        border-radius: 4px;
+    }
+
+    .attraction-info {
+        flex-grow: 1;
+        margin-right: 84px;
+        margin-left: 6px;
+        .title {
+            font-size: 15px;
+            font-weight: bold;
+            color: #000000;
+            line-height: 24px;
+            margin-top: 0;
+        }
+        .sub {
+            font-size: 14px;
+            color: #c8c9cc;
+            line-height: 24px;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+        }
+    }
+
+    button {
+        position: absolute;
+        .flex-col();
+        right: 4px;
+        top: 12px;
+        img {
+            width: 24px;
+            height: 24px;
+            display: flex;
+        }
+
+        span {
+            font-size: 12px;
+            color: #ff7f1f;
+            line-height: 10px;
+            margin-top: 6px;
+        }
+    }
+}
+
+.workflow {
+    padding: 20px 0;
+    .workflow-item {
+        padding: 0 0 30px 20px;
+        position: relative;
+        .name,
+        .desc {
+            font-size: 16px;
+            font-weight: bold;
+            color: #000000;
+            line-height: 26px;
+        }
+
+        .workflow-cover {
+            width: 100%;
+            height: 200px;
+            margin-top: 8px;
+            .cover-img {
+                width: 100%;
+                height: 200px;
+                border-radius: 8px;
+            }
+        }
+
+        &::before {
+            content: '';
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            background: #ff7f1f;
+            top: 8px;
+            left: -5px;
+            border-radius: 10px;
+        }
+
+        &:not(:last-child) {
+            &:after {
+                content: '';
+                position: absolute;
+                left: 0;
+                top: 15px;
+                width: 1px;
+                background: #ff7f1f;
+                height: 100%;
+            }
+        }
+    }
+}
+
+.note {
+    padding-bottom: 14px;
+    .card-title {
+        padding-bottom: 11px;
+        border-bottom: 1px solid #f5f7fa;
+    }
+
+    .note-info {
+        position: relative;
+        padding-left: 24px;
+        margin-top: 30px;
+        .name {
+            font-size: 14px;
+            font-weight: bold;
+            color: #000000;
+            line-height: 24px;
+        }
+
+        .val {
+            font-size: 16px;
+            color: #606266;
+            line-height: 26px;
+            margin-top: 4px;
+        }
+
+        .icon {
+            width: 16px;
+            height: 16px;
+            position: absolute;
+            top: 4px;
+            left: 0;
+        }
+    }
+
+    .tips {
+        padding-top: 14px;
+        font-size: 14px;
+        color: #606266;
+        line-height: 24px;
+    }
+}
 </style>

src/static/svgs/icon-add.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/add</title>
+    <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
+        <g id="选择规格" transform="translate(-323.000000, -656.000000)" stroke="#303133" stroke-width="1.5">
+            <g id="编组-15" transform="translate(16.000000, 656.000000)">
+                <g id="编组-14" transform="translate(209.000000, 0.000000)">
+                    <g id="直线" transform="translate(98.000000, 0.000000)">
+                        <line x1="18" y1="12" x2="18" y2="24"></line>
+                        <line x1="24" y1="18" x2="12" y2="18"></line>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/static/svgs/icon-reduce.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="36px" height="36px" viewBox="0 0 36 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/reduce</title>
+    <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.207773725" stroke-linecap="round">
+        <g id="选择规格" transform="translate(-225.000000, -656.000000)" stroke="#303133" stroke-width="1.5">
+            <g id="编组-15" transform="translate(16.000000, 656.000000)">
+                <g id="直线" transform="translate(209.000000, 0.000000)">
+                    <line x1="24" y1="18" x2="12" y2="18"></line>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/static/svgs/icon_01_guanfang.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_01_guanfang</title>
+    <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商品详情页" transform="translate(-173.000000, -660.000000)" stroke="#FF7F1F">
+            <g id="编组-9" transform="translate(0.000000, 634.000000)">
+                <g id="编组-12" transform="translate(84.000000, 24.000000)">
+                    <g id="编组-11" transform="translate(89.000000, 2.000000)">
+                        <polygon id="星形" stroke-linejoin="round" points="8 10 5.64885899 11.236068 6.09788697 8.61803399 4.19577393 6.76393202 6.8244295 6.38196601 8 4 9.1755705 6.38196601 11.8042261 6.76393202 9.90211303 8.61803399 10.351141 11.236068"></polygon>
+                        <circle id="椭圆形备份-3" cx="8" cy="8" r="7"></circle>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/static/svgs/icon_01_zhengpin.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_01_zhengpin</title>
+    <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商品详情页" transform="translate(-84.000000, -660.000000)" stroke="#FF7F1F">
+            <g id="编组-9" transform="translate(0.000000, 634.000000)">
+                <g id="编组-12" transform="translate(84.000000, 24.000000)">
+                    <g id="icon_01_zhengpin" transform="translate(0.000000, 2.000000)">
+                        <path d="M5,6 L5.58578644,6 C6.49129217,6 7.35971075,5.64028925 8,5 L8,5 L8,5 C8.64028925,5.64028925 9.50870783,6 10.4142136,6 L11,6 L11,6 C11.5842873,8.33714903 10.4669272,10.7665364 8.31218222,11.8439089 L8,12 L8,12 L7.68781778,11.8439089 C5.53307284,10.7665364 4.41571274,8.33714903 5,6 L5,6 L5,6 Z" id="矩形" stroke-linejoin="round"></path>
+                        <circle id="椭圆形备份-2" cx="8" cy="8" r="7"></circle>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/static/svgs/icon_03_wuyou.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_03_wuyou</title>
+    <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商品详情页" transform="translate(-262.000000, -660.000000)" stroke="#FF7F1F">
+            <g id="编组-9" transform="translate(0.000000, 634.000000)">
+                <g id="编组-12" transform="translate(84.000000, 24.000000)">
+                    <g id="编组-10" transform="translate(178.000000, 2.000000)">
+                        <path d="M11.5147186,6.28745619 C12.1617605,6.89949494 12.1617605,7.89180581 11.5147186,8.50384456 L8,11.8284271 L4.48528137,8.50384456 C3.83823954,7.89180581 3.83823954,6.89949494 4.48528137,6.28745619 C5.13232321,5.67541744 6.18138529,5.67541744 6.82842712,6.28745619 L7.99941421,7.39509628 L9.17157288,6.28745619 C9.81861471,5.67541744 10.8676768,5.67541744 11.5147186,6.28745619 Z" id="路径" stroke-linejoin="round"></path>
+                        <circle id="椭圆形备份-4" cx="8" cy="8" r="7"></circle>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/static/svgs/icon_xiangqingye_daohang.svg

@@ -0,0 +1,19 @@
+<?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_xiangqingye_daohang</title>
+    <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商品详情页" transform="translate(-335.000000, -3818.000000)">
+            <g id="编组-26" transform="translate(0.000000, 3556.000000)">
+                <g id="编组-18" transform="translate(16.000000, 254.000000)">
+                    <g id="编组-7" transform="translate(319.000000, 6.000000)">
+                        <g id="编组-8" transform="translate(1.000000, 0.000000)">
+                            <ellipse id="椭圆形" fill="#F2F3F5" cx="11" cy="23" rx="7" ry="2"></ellipse>
+                            <path d="M11,23 C17,18.9803752 20,15.3137085 20,12 C20,7.02943725 15.9705627,3 11,3 C6.02943725,3 2,7.02943725 2,12 C2,15.3137085 5,18.9803752 11,23 Z" id="椭圆形" fill="#FF7F1F"></path>
+                            <circle id="椭圆形" fill="#FFFFFF" cx="11" cy="12" r="3"></circle>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/static/svgs/icon_xiangqingye_dianhua.svg

@@ -0,0 +1,15 @@
+<?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_xiangqingye_dianhua</title>
+    <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商品详情页" transform="translate(-331.000000, -767.000000)">
+            <g id="编组-8" transform="translate(0.000000, 714.000000)">
+                <g id="icon" transform="translate(331.000000, 53.000000)">
+                    <path d="M16.7341602,11.005471 C16.7341602,11.3879248 16.9782692,11.6527004 17.3538216,11.6527004 C17.7293739,11.6527004 17.973483,11.3977313 17.973483,11.005471 C17.9640942,8.86765275 16.3116638,7.13190122 14.2555146,7.12209471 C13.8799622,7.12209471 13.6358532,7.37706387 13.6358532,7.7693241 C13.6358532,8.16158433 13.8799622,8.41655348 14.2555146,8.41655348 C15.6262807,8.42635999 16.7341602,9.58352768 16.7341602,11.005471 L16.7341602,11.005471 Z" id="路径" fill="#F2F3F5"></path>
+                    <path d="M19.2128058,11.005471 C19.2128058,11.3879248 19.4569148,11.6527004 19.8324671,11.6527004 C20.2080195,11.6527004 20.4521285,11.3977313 20.4521285,11.005471 C20.4521285,7.44570941 17.6636523,4.54298368 14.2649034,4.54298368 C13.8893511,4.54298368 13.645242,4.79795283 13.645242,5.19021306 C13.645242,5.5824733 13.8893511,5.83744245 14.2649034,5.83744245 C16.987658,5.83744245 19.2128058,8.16158433 19.2128058,11.005471 L19.2128058,11.005471 Z" id="路径" fill="#F2F3F5"></path>
+                    <path d="M7.64833393,9.59237506 C7.78916606,10.5043801 8.54965959,13.9562702 12.0798518,15.6527957 C12.2394615,15.7312477 12.4178489,15.7116347 12.558681,15.6037631 C13.0562879,15.2311159 14.2111114,14.3681434 14.4458316,14.1916263 C14.8026064,13.9170441 15.4504342,13.662075 15.9855963,14.2014328 L18.802239,16.9570609 C18.802239,16.9570609 19.2153466,17.6631294 18.9242935,18.0455831 C18.1074672,19.0752662 16.2578718,21.222891 16.2578718,21.222891 C16.2578718,21.222891 15.9104858,21.6641837 15.215714,21.4092146 C14.0890569,20.9875348 10.2678116,18.9575881 7.1976711,15.1526639 C4.19325222,11.4261917 3.39520345,8.21946425 2.8130973,5.97377441 C2.61593231,5.23828647 2.72859802,4.57144408 3.26376013,4.31647492 C3.95853199,3.98305373 6.95356206,2.52188436 6.95356206,2.52188436 C6.95356206,2.52188436 7.64833393,2.32575424 7.94877582,2.88472507 C8.24921771,3.4436959 9.92981452,5.85609634 10.1363683,6.23855007 C10.3804773,6.67984283 10.2302564,7.05249005 10.0143138,7.24862017 C9.75142714,7.48397631 8.26799532,8.78824159 7.77038845,9.21972784 C7.67650036,9.3079864 7.6201675,9.45508398 7.64833393,9.59237506 Z" id="路径" fill="#FF7F1F"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/static/svgs/icon_xuzhi_didian.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_xuzhi_didian</title>
+    <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商品详情页" transform="translate(-16.000000, -3814.000000)">
+            <rect fill="#FFFFFF" x="0" y="0" width="375" height="6320"></rect>
+            <rect id="矩形" fill="#F5F7FA" x="0" y="-3" width="375" height="6261"></rect>
+            <g id="编组-26" transform="translate(0.000000, 3556.000000)">
+                <path d="M0,56 L375,56 L375,1070 C375,1076.62742 369.627417,1082 363,1082 L12,1082 C5.372583,1082 8.11624501e-16,1076.62742 0,1070 L0,56 L0,56 Z" id="矩形" fill="#FFFFFF"></path>
+                <g id="编组-18" transform="translate(16.000000, 254.000000)" stroke="#000000" stroke-linecap="round" stroke-linejoin="round">
+                    <g id="icon" transform="translate(0.000000, 4.000000)">
+                        <path d="M8,9.5 C9.1045695,9.5 10,8.6045695 10,7.5 C10,6.3954305 9.1045695,5.5 8,5.5 C6.8954305,5.5 6,6.3954305 6,7.5 C6,8.6045695 6.8954305,9.5 8,9.5 Z" id="椭圆形"></path>
+                        <path d="M8,15 C9,15 15,12.5 15,7.5 C15,4 11.8659932,1 8,1 C4.13400675,1 1,4 1,7.5 C1,12.5 7,15 8,15 Z" id="椭圆形"></path>
+                    </g>
+                    <g id="icon" transform="translate(0.000000, 4.000000)">
+                        <path d="M8,9.5 C9.1045695,9.5 10,8.6045695 10,7.5 C10,6.3954305 9.1045695,5.5 8,5.5 C6.8954305,5.5 6,6.3954305 6,7.5 C6,8.6045695 6.8954305,9.5 8,9.5 Z" id="椭圆形"></path>
+                        <path d="M8,15 C9,15 15,12.5 15,7.5 C15,4 11.8659932,1 8,1 C4.13400675,1 1,4 1,7.5 C1,12.5 7,15 8,15 Z" id="椭圆形"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/static/svgs/icon_xuzhi_guize.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_xuzhi_guize</title>
+    <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商品详情页" transform="translate(-16.000000, -4008.000000)">
+            <rect fill="#FFFFFF" x="0" y="0" width="375" height="6320"></rect>
+            <rect id="矩形" fill="#F5F7FA" x="0" y="-3" width="375" height="6261"></rect>
+            <g id="编组-26" transform="translate(0.000000, 3556.000000)">
+                <path d="M0,56 L375,56 L375,1070 C375,1076.62742 369.627417,1082 363,1082 L12,1082 C5.372583,1082 8.11624501e-16,1076.62742 0,1070 L0,56 L0,56 Z" id="矩形" fill="#FFFFFF"></path>
+                <g id="编组-23" transform="translate(16.000000, 448.000000)">
+                    <g id="icon/使用规则" transform="translate(0.000000, 4.000000)">
+                        <path d="M10.1715729,1.5 C10.5693976,1.5 10.9509285,1.65803526 11.232233,1.93933983 L11.232233,1.93933983 L14.0606602,4.76776695 C14.3419647,5.04907152 14.5,5.43060239 14.5,5.82842712 L14.5,5.82842712 L14.5,13 C14.5,13.4142136 14.3321068,13.7892136 14.0606602,14.0606602 C13.7892136,14.3321068 13.4142136,14.5 13,14.5 L13,14.5 L3,14.5 C2.58578644,14.5 2.21078644,14.3321068 1.93933983,14.0606602 C1.66789322,13.7892136 1.5,13.4142136 1.5,13 L1.5,13 L1.5,3 C1.5,2.58578644 1.66789322,2.21078644 1.93933983,1.93933983 C2.21078644,1.66789322 2.58578644,1.5 3,1.5 L3,1.5 Z" id="矩形" stroke="#000000"></path>
+                        <rect id="矩形" fill="#000000" x="4" y="6" width="4" height="1" rx="0.5"></rect>
+                        <rect id="矩形" fill="#000000" x="4" y="9" width="8" height="1" rx="0.5"></rect>
+                    </g>
+                    <g id="矩形" transform="translate(0.000000, 4.000000)">
+                        <path d="M10.1715729,1.5 C10.5693976,1.5 10.9509285,1.65803526 11.232233,1.93933983 L11.232233,1.93933983 L14.0606602,4.76776695 C14.3419647,5.04907152 14.5,5.43060239 14.5,5.82842712 L14.5,5.82842712 L14.5,13 C14.5,13.4142136 14.3321068,13.7892136 14.0606602,14.0606602 C13.7892136,14.3321068 13.4142136,14.5 13,14.5 L13,14.5 L3,14.5 C2.58578644,14.5 2.21078644,14.3321068 1.93933983,14.0606602 C1.66789322,13.7892136 1.5,13.4142136 1.5,13 L1.5,13 L1.5,3 C1.5,2.58578644 1.66789322,2.21078644 1.93933983,1.93933983 C2.21078644,1.66789322 2.58578644,1.5 3,1.5 L3,1.5 Z" stroke="#000000"></path>
+                        <rect fill="#000000" x="4" y="6" width="4" height="1" rx="0.5"></rect>
+                        <rect fill="#000000" x="4" y="9" width="8" height="1" rx="0.5"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/static/svgs/icon_xuzhi_shijian(1).svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_xuzhi_shijian</title>
+    <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商品详情页" transform="translate(-16.000000, -3924.000000)">
+            <rect fill="#FFFFFF" x="0" y="0" width="375" height="6320"></rect>
+            <rect id="矩形" fill="#F5F7FA" x="0" y="-3" width="375" height="6261"></rect>
+            <g id="编组-26" transform="translate(0.000000, 3556.000000)">
+                <path d="M0,56 L375,56 L375,1070 C375,1076.62742 369.627417,1082 363,1082 L12,1082 C5.372583,1082 8.11624501e-16,1076.62742 0,1070 L0,56 L0,56 Z" id="矩形" fill="#FFFFFF"></path>
+                <g id="编组-20" transform="translate(16.000000, 364.000000)" stroke="#000000" stroke-linecap="round" stroke-linejoin="round">
+                    <g id="icon/使用时间" transform="translate(0.000000, 4.000000)">
+                        <circle id="椭圆形" cx="8" cy="8" r="7"></circle>
+                        <polyline id="直线" points="8 4 8 8 10 10"></polyline>
+                    </g>
+                    <g id="icon/使用时间" transform="translate(0.000000, 4.000000)">
+                        <circle id="椭圆形" cx="8" cy="8" r="7"></circle>
+                        <polyline id="直线" points="8 4 8 8 10 10"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/static/svgs/icon_xuzhi_shijian.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_xuzhi_shijian</title>
+    <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商品详情页" transform="translate(-16.000000, -3730.000000)">
+            <rect fill="#FFFFFF" x="0" y="0" width="375" height="6320"></rect>
+            <rect id="矩形" fill="#F5F7FA" x="0" y="-3" width="375" height="6261"></rect>
+            <g id="编组-26" transform="translate(0.000000, 3556.000000)">
+                <path d="M0,56 L375,56 L375,1070 C375,1076.62742 369.627417,1082 363,1082 L12,1082 C5.372583,1082 8.11624501e-16,1076.62742 0,1070 L0,56 L0,56 Z" id="矩形" fill="#FFFFFF"></path>
+                <g id="编组-17" transform="translate(16.000000, 170.000000)" stroke="#000000" stroke-linecap="round" stroke-linejoin="round">
+                    <g id="icon/使用时间" transform="translate(0.000000, 4.000000)">
+                        <circle id="椭圆形" cx="8" cy="8" r="7"></circle>
+                        <polyline id="直线" points="8 4 8 8 10 10"></polyline>
+                    </g>
+                    <g id="icon/使用时间" transform="translate(0.000000, 4.000000)">
+                        <circle id="椭圆形" cx="8" cy="8" r="7"></circle>
+                        <polyline id="直线" points="8 4 8 8 10 10"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/static/svgs/icon_xuzhi_youxiaoqi.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_xuzhi_youxiaoqi</title>
+    <g id="页面" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="商品详情页" transform="translate(-16.000000, -3646.000000)">
+            <rect fill="#FFFFFF" x="0" y="0" width="375" height="6320"></rect>
+            <rect id="矩形" fill="#F5F7FA" x="0" y="-3" width="375" height="6261"></rect>
+            <g id="编组-26" transform="translate(0.000000, 3556.000000)">
+                <path d="M0,56 L375,56 L375,1070 C375,1076.62742 369.627417,1082 363,1082 L12,1082 C5.372583,1082 8.11624501e-16,1076.62742 0,1070 L0,56 L0,56 Z" id="矩形" fill="#FFFFFF"></path>
+                <g id="编组-4" transform="translate(16.000000, 86.000000)">
+                    <g id="编组" transform="translate(0.000000, 4.000000)">
+                        <g id="编组-7" transform="translate(1.000000, 1.000000)">
+                            <rect id="矩形" stroke="#000000" x="0.5" y="1.5" width="13" height="12" rx="2"></rect>
+                            <path d="M12,1.5 C12.4142136,1.5 12.7892136,1.66789322 13.0606602,1.93933983 C13.3321068,2.21078644 13.5,2.58578644 13.5,3 L13.5,3 L13.5,4.5 L0.5,4.5 L0.5,3 C0.5,2.58578644 0.667893219,2.21078644 0.939339828,1.93933983 C1.21078644,1.66789322 1.58578644,1.5 2,1.5 L2,1.5 Z" id="矩形" stroke="#000000"></path>
+                            <rect id="矩形" fill="#000000" x="4" y="0" width="1" height="3" rx="0.5"></rect>
+                            <rect id="矩形" fill="#000000" x="9" y="0" width="1" height="3" rx="0.5"></rect>
+                            <polyline id="直线" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" transform="translate(6.996440, 8.043557) rotate(-45.000000) translate(-6.996440, -8.043557) " points="4.99644004 7.04355732 4.99644004 9.04355732 8.99644004 9.04355732"></polyline>
+                        </g>
+                    </g>
+                    <g id="icon/有效期" transform="translate(0.000000, 4.000000)">
+                        <g id="编组-7" transform="translate(1.000000, 1.000000)">
+                            <rect id="矩形" stroke="#000000" x="0.5" y="1.5" width="13" height="12" rx="2"></rect>
+                            <path d="M12,1.5 C12.4142136,1.5 12.7892136,1.66789322 13.0606602,1.93933983 C13.3321068,2.21078644 13.5,2.58578644 13.5,3 L13.5,3 L13.5,4.5 L0.5,4.5 L0.5,3 C0.5,2.58578644 0.667893219,2.21078644 0.939339828,1.93933983 C1.21078644,1.66789322 1.58578644,1.5 2,1.5 L2,1.5 Z" id="矩形" stroke="#000000"></path>
+                            <rect id="矩形" fill="#000000" x="4" y="0" width="1" height="3" rx="0.5"></rect>
+                            <rect id="矩形" fill="#000000" x="9" y="0" width="1" height="3" rx="0.5"></rect>
+                            <polyline id="直线" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" transform="translate(6.996440, 8.043557) rotate(-45.000000) translate(-6.996440, -8.043557) " points="4.99644004 7.04355732 4.99644004 9.04355732 8.99644004 9.04355732"></polyline>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

yarn.lock

@@ -3984,15 +3984,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001111:
-  version "1.0.30001116"
-  resolved "https://registry.npm.taobao.org/caniuse-lite/download/caniuse-lite-1.0.30001116.tgz?cache=0&sync_timestamp=1597781242980&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcaniuse-lite%2Fdownload%2Fcaniuse-lite-1.0.30001116.tgz#f3a3dea347f9294a3bdc4292309039cc84117fb8"
-  integrity sha1-86Peo0f5KUo73EKSMJA5zIQRf7g=
-
-caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805, caniuse-lite@^1.0.30001164:
-  version "1.0.30001164"
-  resolved "https://registry.npm.taobao.org/caniuse-lite/download/caniuse-lite-1.0.30001164.tgz?cache=0&sync_timestamp=1606806223481&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcaniuse-lite%2Fdownload%2Fcaniuse-lite-1.0.30001164.tgz#5bbfd64ca605d43132f13cc7fdabb17c3036bfdc"
-  integrity sha1-W7/WTKYF1DEy8TzH/auxfDA2v9w=
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805, caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001111, caniuse-lite@^1.0.30001164:
+  version "1.0.30001192"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001192.tgz"
+  integrity sha512-63OrUnwJj5T1rUmoyqYTdRWBqFFxZFlyZnRRjDR8NSUQFB6A+j/uBORU/SyJ5WzDLg4SPiZH40hQCBNdZ/jmAw==
 
 case-sensitive-paths-webpack-plugin@^2.2.0:
   version "2.3.0"