diff --git a/buyer/public/config.js b/buyer/public/config.js
index d7556570..614eb9ac 100644
--- a/buyer/public/config.js
+++ b/buyer/public/config.js
@@ -3,8 +3,8 @@ var BASE = {
      * @description api请求基础路径
      */
     API_DEV: {
-      common: "https://common-api.pickmall.cn",
-      buyer: "https://buyer-api.pickmall.cn",
+      common: "http://192.168.102:8890",
+      buyer: "http://192.168.102:8888",
       seller: "https://store-api.pickmall.cn",
       manager: "https://admin-api.pickmall.cn"
     },
diff --git a/buyer/src/api/index.js b/buyer/src/api/index.js
index 789ec356..66867689 100644
--- a/buyer/src/api/index.js
+++ b/buyer/src/api/index.js
@@ -1,13 +1,24 @@
-import request, {Method} from '@/plugins/request.js'
+import request, { Method } from "@/plugins/request.js";
 
 // 获取首页楼层装修数据
-export function indexData (params) {
+export function indexData(params) {
   return request({
-    url: '/buyer/other/pageData/getIndex',
+    url: "/buyer/other/pageData/getIndex",
     method: Method.GET,
     needToken: false,
-    params
-  })
+    params,
+  });
+}
+
+/**
+ * 获取店铺楼层数据
+ */
+export function getFloorStoreData(params) {
+  return request({
+    url: `/buyer/other/pageData?pageClientType=PC`,
+    method: "get",
+    params,
+  });
 }
 
 /**
@@ -15,21 +26,22 @@ export function indexData (params) {
  * @param pageClientType 客户端类型,可用值:PC,H5,WECHAT_MP,APP
  * @param pageType 页面类型,可用值:INDEX,STORE,SPECIAL
  */
-export function pageData (params) {
+export function pageData(params) {
   return request({
     url: `/buyer/other/pageData`,
     method: Method.GET,
     needToken: false,
-    params
-  })
+    params,
+  });
 }
+
 /**
  * 刷新token
  */
-export function handleRefreshToken (token) {
+export function handleRefreshToken(token) {
   return request({
     url: `/buyer/passport/member/refresh/${token}`,
     method: Method.GET,
-    needToken: false
-  })
+    needToken: false,
+  });
 }
diff --git a/buyer/src/pages/Merchant.vue b/buyer/src/pages/Merchant.vue
index 35eb35e6..da3bc49e 100644
--- a/buyer/src/pages/Merchant.vue
+++ b/buyer/src/pages/Merchant.vue
@@ -1,189 +1,335 @@
 <template>
   <div class="merchant">
-    <BaseHeader />
-    <!-- 搜索栏 -->
-    <Search :store="true" @search="search"></Search>
-    <!-- 店铺logo -->
-    <div class="shop-logo">
-      <div>
-        <img :src="storeMsg.storeLogo" height="80" alt="">
+    <!-- 普通店铺装修 -->
+    <div v-if="basePageData">
+      <BaseHeader />
+      <!-- 搜索栏 -->
+      <Search :store="true" @search="search"></Search>
+      <!-- 店铺logo -->
+      <div class="shop-logo">
         <div>
-          <p>{{storeMsg.storeName || 'xx店铺'}}</p>
-          <p class="ellipsis" :alt="storeMsg.storeDesc" v-html="storeMsg.storeDesc"></p>
-        </div>
-        <div>
-          <span class="hover-pointer" @click="collect"><Icon type="ios-heart" :color="storeCollected ? '#ed3f14' : '#fff'" />{{storeCollected?'已收藏店铺':'收藏店铺'}}</span>
-          <span style="width:80px" class="hover-pointer ml_10" @click="connectCs(storeMsg.yzfSign)"><Icon custom="icomoon icon-customer-service"  />联系客服</span>
+          <img :src="storeMsg.storeLogo" height="80" alt="" />
+          <div>
+            <p>{{ storeMsg.storeName || "xx店铺" }}</p>
+            <p
+              class="ellipsis"
+              :alt="storeMsg.storeDesc"
+              v-html="storeMsg.storeDesc"
+            ></p>
+          </div>
+          <div>
+            <span class="hover-pointer" @click="collect"
+              ><Icon
+                type="ios-heart"
+                :color="storeCollected ? '#ed3f14' : '#fff'"
+              />{{ storeCollected ? "已收藏店铺" : "收藏店铺" }}</span
+            >
+            <span
+              style="width: 80px"
+              class="hover-pointer ml_10"
+              @click="connectCs(storeMsg.yzfSign)"
+              ><Icon custom="icomoon icon-customer-service" />联系客服</span
+            >
+          </div>
         </div>
       </div>
-    </div>
-    <div  class="store-category">
-      <ul class="cate-list">
-        <li class="cate-item" @click="searchByCate({id:'', labelName: '店铺推荐'})">首页</li>
-        <li class="cate-item" v-for="(cate, index) in cateList" :key="index">
-          <Dropdown v-if="cate.children.length">
-            <div @click.self="searchByCate(cate)">{{cate.labelName}} <Icon type="ios-arrow-down"></Icon></div>
-            <DropdownMenu slot="list">
-                <DropdownItem @click.native="searchByCate(sec)" :name="sec.id" v-for="sec in cate.children" :key="sec.id">{{sec.labelName}}</DropdownItem>
-            </DropdownMenu>
-          </Dropdown>
-          <span v-else @click.self="searchByCate(cate)">{{cate.labelName}}</span>
-        </li>
-      </ul>
-    </div>
-
-    <div class="promotion-decorate">{{cateName}}</div>
-
-    <div class="goods-list">
-      <empty v-if="goodsList.length === 0" />
-      <div
-        v-else
-        class="goods-show-info"
-        v-for="(item, index) in goodsList"
-        :key="index"
-        @click="goGoodsDetail(item.content.id, item.content.goodsId)"
-      >
-        <div class="goods-show-img">
-          <img width="220" height="220" :src="item.content.thumbnail" />
-        </div>
-        <div class="goods-show-price">
-          <span>
-            <span class="seckill-price text-danger">{{
-              item.content.price | unitPrice("￥")
+      <div class="store-category">
+        <ul class="cate-list">
+          <li
+            class="cate-item"
+            @click="searchByCate({ id: '', labelName: '店铺推荐' })"
+          >
+            首页
+          </li>
+          <li class="cate-item" v-for="(cate, index) in cateList" :key="index">
+            <Dropdown v-if="cate.children.length">
+              <div @click.self="searchByCate(cate)">
+                {{ cate.labelName }} <Icon type="ios-arrow-down"></Icon>
+              </div>
+              <DropdownMenu slot="list">
+                <DropdownItem
+                  @click.native="searchByCate(sec)"
+                  :name="sec.id"
+                  v-for="sec in cate.children"
+                  :key="sec.id"
+                  >{{ sec.labelName }}</DropdownItem
+                >
+              </DropdownMenu>
+            </Dropdown>
+            <span v-else @click.self="searchByCate(cate)">{{
+              cate.labelName
             }}</span>
-          </span>
-        </div>
-        <div class="goods-show-detail">
-          <span>{{ item.content.goodsName }}</span>
-        </div>
-        <div class="goods-show-num">
-          已有<span>{{ item.content.commentNum || 0 }}</span>人评价
+          </li>
+        </ul>
+      </div>
+
+      <div class="promotion-decorate">{{ cateName }}</div>
+
+      <div class="goods-list">
+        <empty v-if="goodsList.length === 0" />
+        <div
+          v-else
+          class="goods-show-info"
+          v-for="(item, index) in goodsList"
+          :key="index"
+          @click="goGoodsDetail(item.content.id, item.content.goodsId)"
+        >
+          <div class="goods-show-img">
+            <img width="220" height="220" :src="item.content.thumbnail" />
+          </div>
+          <div class="goods-show-price">
+            <span>
+              <span class="seckill-price text-danger">{{
+                item.content.price | unitPrice("￥")
+              }}</span>
+            </span>
+          </div>
+          <div class="goods-show-detail">
+            <span>{{ item.content.goodsName }}</span>
+          </div>
+          <div class="goods-show-num">
+            已有<span>{{ item.content.commentNum || 0 }}</span
+            >人评价
+          </div>
         </div>
       </div>
+      <div class="goods-page">
+        <Page
+          show-sizer
+          @on-change="changePageNum"
+          @on-page-size-change="changePageSize"
+          :total="total"
+          :page-size="params.pageSize"
+        ></Page>
+      </div>
+      <BaseFooter />
     </div>
-    <div class="goods-page">
-      <Page
-        show-sizer
-        @on-change="changePageNum"
-        @on-page-size-change="changePageSize"
-        :total="total"
-        :page-size="params.pageSize"
-      ></Page>
+
+    <div v-if="enablePageData">
+      <drawer></drawer>
+      <!-- 固定头部 -->
+      <hover-search
+        class="hover-search"
+        :class="{ show: topSearchShow }"
+      ></hover-search>
+      <!-- 顶部广告 -->
+      <FixedTopPage :data="topAdvert"></FixedTopPage>
+      <!-- 头部 包括登录，我的订单等 -->
+      <BaseHeader></BaseHeader>
+      <!-- 搜索框、logo -->
+      <Search :store="true" @search="search"></Search>
+      <!-- 商品分类 -->
+      <cateNav
+        :showAlways="true"
+        v-if="showNav"
+        :large="carouselLarge"
+        :opacity="carouselOpacity"
+      ></cateNav>
+      <!-- 楼层装修部分 -->
+      <model-form ref="modelForm" :data="modelForm"></model-form>
+      <!-- 底部栏 -->
+      <BaseFooter></BaseFooter>
     </div>
-    <BaseFooter />
   </div>
 </template>
 
 <script>
-import {getDetailById, getCateById} from '@/api/shopentry'
-import { cancelCollect, collectGoods, isCollection } from '@/api/member';
-import {goodsList} from '@/api/goods';
+import { getDetailById, getCateById } from "@/api/shopentry";
+import { cancelCollect, collectGoods, isCollection } from "@/api/member";
+import { goodsList } from "@/api/goods";
+import Search from "@/components/Search";
+import ModelForm from "@/components/indexDecorate/ModelForm";
+import HoverSearch from "@/components/header/hoverSearch";
+import storage from "@/plugins/storage";
+import { getFloorStoreData } from "@/api/index.js";
+import { seckillByDay } from "@/api/promotion";
 export default {
-  name: 'Merchant',
-  data () {
+  name: "Merchant",
+  components: {
+    Search,
+    ModelForm,
+    HoverSearch,
+  },
+  data() {
     return {
+      // 店铺装修的内容
+      modelForm: { list: [] }, // 楼层装修数据
+      topAdvert: {}, // 顶部广告
+      showNav: false, // 是否展示分类栏
+      topSearchShow: false, // 滚动后顶部搜索栏展示
+      carouselLarge: false, // 不同轮播分类尺寸
+      carouselOpacity: false, // 不同轮播分类样式,
+
+      enablePageData: false, //是否显示楼层装修内容
+      basePageData: false, //基础店铺信息
       storeMsg: {}, // 店铺信息
       cateList: [], // 店铺分裂
       goodsList: [], // 商品列表
       total: 0, // 商品数量
-      params: { // 请求参数
+      params: {
+        // 请求参数
         pageNumber: 1,
         pageSize: 20,
-        keyword: '',
+        keyword: "",
         storeId: this.$route.query.id,
-        storeCatId: ''
+        storeCatId: "",
       },
-      cateName: '店铺推荐', // 分类名称
-      storeCollected: false // 是否收藏
-    }
+      cateName: "店铺推荐", // 分类名称
+      storeCollected: false, // 是否收藏
+    };
   },
-  created () {
-    this.getStoreMsg()
-    this.getCateList()
-    this.getGoodsList()
+  created() {
+    this.getStoreMsg();
   },
   methods: {
-    getStoreMsg () { // 店铺信息
-      getDetailById(this.$route.query.id).then(res => {
-        if (res.success) {
-          this.storeMsg = res.result
-          document.title = this.storeMsg.storeName
-          if (this.Cookies.getItem('userInfo')) {
-            isCollection('STORE', this.storeMsg.storeId).then(res => {
-              if (res.success && res.result) {
-                this.storeCollected = true;
+    getIndexData() {
+      // 获取首页装修数据
+      getFloorStoreData({ clientType: "PC", num: this.$route.query.id ,pageType:'STORE'}).then(
+        (res) => {
+          if (res.success) {
+            let dataJson = JSON.parse(res.result.pageData);
+            // 秒杀活动不是装修的数据，需要调用接口判断是否有秒杀商品
+            // 轮播图根据不同轮播，样式不同
+            for (let i = 0; i < dataJson.list.length; i++) {
+              let type = dataJson.list[i].type;
+              if (type === "carousel2") {
+                this.carouselLarge = true;
+              } else if (type === "carousel1") {
+                this.carouselLarge = true;
+                this.carouselOpacity = true;
               }
-            })
+
+              // else if (type === "seckill") {
+              //   let seckill = this.getListByDay();
+              //   dataJson.list[i].options.list = seckill;
+              // }
+            }
+            this.modelForm = dataJson;
+            storage.setItem("navList", dataJson.list[1]);
+            this.showNav = true;
+            this.topAdvert = dataJson.list[0];
           }
         }
-      })
+      );
     },
-    getCateList () { // 店铺分类
-      getCateById(this.$route.query.id).then(res => {
+    // async getListByDay() {
+    //   // 当天秒杀活动
+    //   const res = await seckillByDay();
+    //   if (res.success && res.result.length) {
+    //     return res.result;
+    //   } else {
+    //     return [];
+    //   }
+    // },
+
+    getStoreMsg() {
+      // 店铺信息
+      getDetailById(this.$route.query.id).then((res) => {
         if (res.success) {
-          this.cateList = res.result
+          if (res.result.pageShow == "1") {
+            this.getIndexData();
+            let that = this;
+            window.onscroll = function () {
+              let top =
+                document.documentElement.scrollTop || document.body.scrollTop;
+              if (top > 300) {
+                that.topSearchShow = true;
+              } else {
+                that.topSearchShow = false;
+              }
+            };
+            // 楼层装修
+            this.enablePageData = true;
+          } else {
+            this.storeMsg = res.result;
+            document.title = this.storeMsg.storeName;
+            if (this.Cookies.getItem("userInfo")) {
+              isCollection("STORE", this.storeMsg.storeId).then((res) => {
+                if (res.success && res.result) {
+                  this.storeCollected = true;
+                }
+              });
+            }
+            this.basePageData = true;
+
+            this.getCateList();
+            this.getGoodsList();
+          }
         }
-      })
-    },
-    getGoodsList () { // 商品信息
-      goodsList(this.params).then((res) => {
-        if (res.success) {
-          this.goodsList = res.result.content;
-          this.total = res.result.totalElements;
-        }
-      }).catch(() => {
       });
     },
-    goGoodsDetail (skuId, goodsId) {
+    getCateList() {
+      // 店铺分类
+      getCateById(this.$route.query.id).then((res) => {
+        if (res.success) {
+          this.cateList = res.result;
+        }
+      });
+    },
+    getGoodsList() {
+      // 商品信息
+      goodsList(this.params)
+        .then((res) => {
+          if (res.success) {
+            this.goodsList = res.result.content;
+            this.total = res.result.totalElements;
+          }
+        })
+        .catch(() => {});
+    },
+    goGoodsDetail(skuId, goodsId) {
       // 跳转商品详情
       let routeUrl = this.$router.resolve({
-        path: '/goodsDetail',
-        query: { skuId, goodsId }
+        path: "/goodsDetail",
+        query: { skuId, goodsId },
       });
-      window.open(routeUrl.href, '_blank');
+      window.open(routeUrl.href, "_blank");
     },
-    search (val) { // 搜索本店商品
+    search(val) {
+      // 搜索本店商品
       console.log(val);
-      this.params.keyword = val
-      this.getGoodsList()
+      this.params.keyword = val;
+      this.getGoodsList();
     },
-    searchByCate (cate) { // 搜索同分类下商品
-      this.params.storeCatId = cate.id
-      this.cateName = cate.labelName
-      this.getGoodsList()
+    searchByCate(cate) {
+      // 搜索同分类下商品
+      this.params.storeCatId = cate.id;
+      this.cateName = cate.labelName;
+      this.getGoodsList();
     },
     // 分页 修改页码
-    changePageNum (val) {
+    changePageNum(val) {
       this.params.pageNumber = val;
       this.getGoodsList();
     },
     // 分页 修改页数
-    changePageSize (val) {
+    changePageSize(val) {
       this.params.pageNumber = 1;
       this.params.pageSize = val;
       this.getGoodsList();
     },
-    async collect () { // 收藏店铺
+    async collect() {
+      // 收藏店铺
       if (this.storeCollected) {
-        let cancel = await cancelCollect('STORE', this.storeMsg.storeId)
+        let cancel = await cancelCollect("STORE", this.storeMsg.storeId);
         if (cancel.success) {
-          this.$Message.success('已取消收藏')
+          this.$Message.success("已取消收藏");
           this.storeCollected = false;
         }
       } else {
-        let collect = await collectGoods('STORE', this.storeMsg.storeId);
+        let collect = await collectGoods("STORE", this.storeMsg.storeId);
         if (collect.code === 200) {
           this.storeCollected = true;
-          this.$Message.success('收藏店铺成功,可以前往个人中心我的收藏查看');
+          this.$Message.success("收藏店铺成功,可以前往个人中心我的收藏查看");
         }
       }
-    }
-  }
+    },
+  },
 };
 </script>
 
 <style scoped lang="scss">
-@import '../assets/styles/goodsList.scss';
+@import "../assets/styles/goodsList.scss";
 .merchant {
   margin: 0 auto;
 }
@@ -193,25 +339,25 @@ export default {
   background-color: #666;
   padding: 4px;
   color: #fff;
-  >div{
+  > div {
     display: flex;
     width: 1200px;
     margin: 0 auto;
     align-items: center;
 
-    >div:nth-child(2){
+    > div:nth-child(2) {
       margin-left: 10px;
       flex: 1;
     }
 
-    >div:nth-child(3){
+    > div:nth-child(3) {
       width: 200px;
     }
   }
   p:nth-child(1) {
     font-size: 20px;
   }
-  p:nth-child(2){
+  p:nth-child(2) {
     font-size: 14px;
     max-height: 40px;
     max-width: 400px;
@@ -221,9 +367,9 @@ export default {
 .store-category {
   background-color: #005aa0;
   color: #fff;
-  .cate-list{
+  .cate-list {
     width: 1200px;
-    margin: 0 auto ;
+    margin: 0 auto;
     clear: left;
     height: 30px;
     line-height: 30px;
@@ -231,12 +377,13 @@ export default {
       margin-right: 25px;
       float: left;
     }
-    .cate-item:hover{
+    .cate-item:hover {
       cursor: pointer;
     }
   }
 }
-.promotion-decorate::before,.promotion-decorate::after{
-  background-image: url('/src/assets/images/sprite@2x.png');
+.promotion-decorate::before,
+.promotion-decorate::after {
+  background-image: url("/src/assets/images/sprite@2x.png");
 }
 </style>
diff --git a/manager/public/config.js b/manager/public/config.js
index ada826fc..2d68d4d8 100644
--- a/manager/public/config.js
+++ b/manager/public/config.js
@@ -3,10 +3,10 @@ var BASE = {
      * @description api请求基础路径
      */
     API_DEV: {
-      common: "https://common-api.pickmall.cn",
+      common: "http://192.168.0.102:8890",
       buyer: "https://buyer-api.pickmall.cn",
       seller: "https://store-api.pickmall.cn",
-      manager: "https://admin-api.pickmall.cn"
+      manager: "http://192.168.0.102:8887"
     },
     API_PROD: {
       common: "https://common-api.pickmall.cn",
diff --git a/manager/src/views/lili-dialog/goods-dialog.vue b/manager/src/views/lili-dialog/goods-dialog.vue
index 4fb9ded7..cfb503a3 100644
--- a/manager/src/views/lili-dialog/goods-dialog.vue
+++ b/manager/src/views/lili-dialog/goods-dialog.vue
@@ -4,19 +4,60 @@
       <div class="query-wrapper">
         <div class="query-item">
           <div>搜索范围</div>
-          <Input placeholder="商品名称" @on-clear="goodsData=[]; goodsParams.goodsName=''; goodsParams.pageNumber = 1; getQueryGoodsList()" @on-enter="()=>{goodsData=[];goodsParams.pageNumber =1; getQueryGoodsList();}" icon="ios-search" clearable
-            style="width: 150px" v-model="goodsParams.goodsName" />
+          <Input
+            placeholder="商品名称"
+            @on-clear="
+              goodsData = [];
+              goodsParams.goodsName = '';
+              goodsParams.pageNumber = 1;
+              getQueryGoodsList();
+            "
+            @on-enter="
+              () => {
+                goodsData = [];
+                goodsParams.pageNumber = 1;
+                getQueryGoodsList();
+              }
+            "
+            icon="ios-search"
+            clearable
+            style="width: 150px"
+            v-model="goodsParams.goodsName"
+          />
         </div>
         <div class="query-item">
-          <Cascader v-model="category" placeholder="请选择商品分类" style="width: 250px" :data="skuList"></Cascader>
+          <Cascader
+            v-model="category"
+            placeholder="请选择商品分类"
+            style="width: 250px"
+            :data="skuList"
+          ></Cascader>
         </div>
         <div class="query-item">
-          <Button type="primary" @click="goodsData=[]; getQueryGoodsList();" icon="ios-search">搜索</Button>
+          <Button
+            type="primary"
+            @click="
+              goodsData = [];
+              getQueryGoodsList();
+            "
+            icon="ios-search"
+            >搜索</Button
+          >
         </div>
       </div>
-      <div style="positon:retavle;">
-        <Scroll class="wap-content-list" :on-reach-bottom="handleReachBottom" :distance-to-edge="[3,3]">
-          <div class="wap-content-item" :class="{ active: item.selected }" @click="checkedGoods(item, index)" v-for="(item, index) in goodsData" :key="index">
+      <div>
+        <Scroll
+          class="wap-content-list"
+          :on-reach-bottom="handleReachBottom"
+          :distance-to-edge="[3, 3]"
+        >
+          <div
+            class="wap-content-item"
+            :class="{ active: item.selected }"
+            @click="checkedGoods(item, index)"
+            v-for="(item, index) in goodsData"
+            :key="index"
+          >
             <div>
               <img :src="item.thumbnail" alt="" />
             </div>
@@ -32,7 +73,6 @@
 
           <div v-if="empty" class="empty">暂无商品信息</div>
         </Scroll>
-
       </div>
     </div>
   </div>
@@ -44,8 +84,9 @@ export default {
     return {
       type: "multiple", //单选或者多选 single  multiple
       skuList: [], // 商品sku列表
-      total: 0,  // 商品总数
-      goodsParams: { // 商品请求参数
+      total: 0, // 商品总数
+      goodsParams: {
+        // 商品请求参数
         pageNumber: 1,
         pageSize: 18,
         order: "desc",
@@ -62,12 +103,12 @@ export default {
     };
   },
   props: {
-    selectedWay: { 
+    selectedWay: {
       type: Array,
-      default: function(){
-        return new Array()
-      }
-    }
+      default: function () {
+        return new Array();
+      },
+    },
   },
   watch: {
     category(val) {
@@ -78,7 +119,7 @@ export default {
         this.$emit("selected", this.selectedWay);
       },
       deep: true,
-      immediate: true
+      immediate: true,
     },
     "goodsParams.categoryPath": {
       handler: function () {
@@ -112,22 +153,21 @@ export default {
     },
     // 获取列表方法
     initGoods(res) {
-      if (res.result.records.length !=0) {
+      if (res.result.records.length != 0) {
         res.result.records.forEach((item) => {
           item.selected = false;
           item.___type = "goods"; //设置为goods让pc wap知道标识
-          this.selectedWay.forEach(e => {
+          this.selectedWay.forEach((e) => {
             if (e.id && e.id === item.id) {
-              item.selected = true
+              item.selected = true;
             }
-          })
+          });
         });
         /**
          * 解决数据请求中，滚动栏会一直上下跳动
          */
         this.total = res.result.total;
         this.goodsData.push(...res.result.records);
-
       } else {
         this.empty = true;
       }
@@ -138,12 +178,12 @@ export default {
         // 商品
         this.initGoods(res);
       });
-      if (localStorage.getItem('category')) {
-        this.deepGroup(JSON.parse(localStorage.getItem('category')))
+      if (localStorage.getItem("category")) {
+        this.deepGroup(JSON.parse(localStorage.getItem("category")));
       } else {
         setTimeout(() => {
-          this.deepGroup(JSON.parse(localStorage.getItem('category')))
-        },3000)
+          this.deepGroup(JSON.parse(localStorage.getItem("category")));
+        }, 3000);
       }
     },
 
@@ -203,9 +243,9 @@ export default {
         this.selectedWay.push(val);
       } else {
         val.selected = false;
-        for (let i = 0; i<this.selectedWay.length; i++ ) {
-          if (this.selectedWay[i].id===val.id) {
-            this.selectedWay.splice(i,1)
+        for (let i = 0; i < this.selectedWay.length; i++) {
+          if (this.selectedWay[i].id === val.id) {
+            this.selectedWay.splice(i, 1);
             break;
           }
         }
diff --git a/manager/src/views/lili-dialog/index.vue b/manager/src/views/lili-dialog/index.vue
index 85e8c7f0..595ab1bb 100644
--- a/manager/src/views/lili-dialog/index.vue
+++ b/manager/src/views/lili-dialog/index.vue
@@ -1,9 +1,33 @@
 <template>
-  <Modal :styles="{ top: '120px' }" width="1160" @on-cancel="clickClose" @on-ok="clickOK" v-model="flag" :mask-closable="false" scrollable>
+  <Modal
+    :styles="{ top: '120px' }"
+    width="1160"
+    @on-cancel="clickClose"
+    @on-ok="clickOK"
+    v-model="flag"
+    :mask-closable="false"
+    scrollable
+  >
     <template v-if="flag">
-      <goodsDialog @selected="(val) => {goodsData = val;}"
-        v-if="goodsFlag" ref="goodsDialog" :selectedWay='goodsData'/>
-      <linkDialog @selectedLink="(val) => { linkData = val; }" v-else class="linkDialog" />
+      <goodsDialog
+        @selected="
+          (val) => {
+            goodsData = val;
+          }
+        "
+        v-if="goodsFlag"
+        ref="goodsDialog"
+        :selectedWay="goodsData"
+      />
+      <linkDialog
+        @selectedLink="
+          (val) => {
+            linkData = val;
+          }
+        "
+        v-else
+        class="linkDialog"
+      />
     </template>
   </Modal>
 </template>
@@ -13,7 +37,7 @@ import linkDialog from "./link-dialog";
 export default {
   components: {
     goodsDialog,
-    linkDialog
+    linkDialog,
   },
   data() {
     return {
@@ -53,12 +77,11 @@ export default {
       if (type == "goods") {
         this.goodsFlag = true;
         if (mutiple) {
-          this.singleGoods()
+          this.singleGoods();
         }
       } else {
         this.goodsFlag = false;
       }
-
     },
     // 关闭组件
     close() {
diff --git a/manager/src/views/lili-floor-renovation/modelForm.vue b/manager/src/views/lili-floor-renovation/modelForm.vue
index f2c65e68..572f56f6 100644
--- a/manager/src/views/lili-floor-renovation/modelForm.vue
+++ b/manager/src/views/lili-floor-renovation/modelForm.vue
@@ -59,8 +59,8 @@
             width="800"
             :z-index="100"
             :mask-closable="false"
-            
-           
+
+
             >
             <!-- 顶部广告 -->
             <div class="modal-top-advert">
@@ -119,7 +119,7 @@
         <liliDialog
             ref="liliDialog"
             @selectedLink="selectedLink"
-           
+
         ></liliDialog>
         <!-- 选择图片 -->
         <Modal width="1200px" v-model="picModelFlag" footer-hide>
diff --git a/manager/src/views/lili-floor-renovation/modelList/seckill.vue b/manager/src/views/lili-floor-renovation/modelList/seckill.vue
index 2a75a10d..1c296efc 100644
--- a/manager/src/views/lili-floor-renovation/modelList/seckill.vue
+++ b/manager/src/views/lili-floor-renovation/modelList/seckill.vue
@@ -288,4 +288,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/seller/package.json b/seller/package.json
index 563d30f4..464632f8 100644
--- a/seller/package.json
+++ b/seller/package.json
@@ -13,13 +13,16 @@
     "@amap/amap-jsapi-loader": "0.0.7",
     "@antv/g2": "^4.1.14",
     "axios": "^0.21.1",
+    "dplayer": "^1.26.0",
     "js-cookie": "^2.2.1",
     "node-sass": "^4.14.1",
     "sass-loader": "^8.0.2",
     "sockjs-client": "^1.4.0",
+    "swiper": "^6.3.5",
     "uuid": "^8.3.2",
     "view-design": "^4.6.1",
     "vue": "^2.6.10",
+    "vue-awesome-swiper": "^4.1.1",
     "vue-json-excel": "^0.3.0",
     "vue-lazyload": "^1.3.3",
     "vue-qr": "^2.3.0",
diff --git a/seller/public/config.js b/seller/public/config.js
index 69441029..b07c9ba4 100644
--- a/seller/public/config.js
+++ b/seller/public/config.js
@@ -3,9 +3,9 @@ var BASE = {
    * @description api请求基础路径
    */
   API_DEV: {
-    common: "https://common-api.pickmall.cn",
+    common: "http://192.168.0.102:8890",
     buyer: "https://buyer-api.pickmall.cn",
-    seller: "https://store-api.pickmall.cn",
+    seller: "http://192.168.0.102:8889",
     manager: "https://admin-api.pickmall.cn"
   },
   API_PROD: {
diff --git a/seller/src/App.vue b/seller/src/App.vue
index 6377d61c..c200e6cb 100644
--- a/seller/src/App.vue
+++ b/seller/src/App.vue
@@ -5,8 +5,10 @@
 </template>
 
 <script>
+
 export default {
 
+
 };
 </script>
 
diff --git a/seller/src/api/index.js b/seller/src/api/index.js
index 13ff0745..e619f7f3 100644
--- a/seller/src/api/index.js
+++ b/seller/src/api/index.js
@@ -216,25 +216,25 @@ export const deleteMessageSend = (ids, params) => {
 
 // 分页获取文件数据
 export const getFileListData = params => {
-  return getRequest("/file", params);
+  return getRequest(`${commonUrl}/common/common/file`, params);
 };
 
 
 // 复制文件
 export const copyFile = params => {
-  return postRequest("/file/copy", params);
+  return postRequest(`${commonUrl}/common/common/file/copy`, params);
 };
 // 重命名文件
 export const renameFile = params => {
-  return postRequest("/file/rename", params);
+  return postRequest(`${commonUrl}/common/common/file/rename`, params);
 };
 // 删除文件
 export const deleteFile = (ids, params) => {
-  return deleteRequest(`/file/delete/${ids}`, params);
+  return deleteRequest(`${commonUrl}/common/common/file/delete/${ids}`, params);
 };
 // 下载文件
 export const aliDownloadFile = (fKey, params) => {
-  return getRequest(`/file/ali/download/${fKey}`, params);
+  return getRequest(`${commonUrl}/common/common/file/ali/download/${fKey}`, params);
 };
 
 
diff --git a/seller/src/api/other.js b/seller/src/api/other.js
index 371b3ab1..694e10bc 100644
--- a/seller/src/api/other.js
+++ b/seller/src/api/other.js
@@ -35,7 +35,20 @@ export const getHomeData = params => {
  */
 export const getHomeList = params => {
 
-  return getRequest("/pageData/pageDataList", params);
+  return getRequest("/other/pageData/pageDataList", params);
+};
+
+
+
+
+/**
+ * 发布页面
+ *
+ */
+
+ export const releasePageHome = (id) => {
+
+  return putRequest(`/other/pageData/release/${id}`);
 };
 
 
@@ -43,9 +56,9 @@ export const getHomeList = params => {
  * 修改楼层装修
  *
  */
-export const updateHome = (id,params) => {
+ export const updateHome = (id, params) => {
 
-  return putRequest(`/pageData/update/${id}`, params);
+  return putRequest(`/other/pageData/update/${id}`, params);
 };
 
 /**
@@ -54,16 +67,6 @@ export const updateHome = (id,params) => {
  */
 export const removePageHome = (id) => {
 
-  return deleteRequest(`/pageData/removePageData/${id}`);
-};
-
-
-/**
- * 发布页面
- *
- */
-export const releasePageHome = (id) => {
-
-  return putRequest(`/pageData/releasePageData`,id);
+  return deleteRequest(`/other/pageData/remove/${id}`);
 };
 
diff --git a/seller/src/assets/decorate.png b/seller/src/assets/decorate.png
new file mode 100644
index 00000000..675eb8c6
Binary files /dev/null and b/seller/src/assets/decorate.png differ
diff --git a/seller/src/assets/decorate1.png b/seller/src/assets/decorate1.png
new file mode 100644
index 00000000..57277747
Binary files /dev/null and b/seller/src/assets/decorate1.png differ
diff --git a/seller/src/assets/decorate10.jpeg b/seller/src/assets/decorate10.jpeg
new file mode 100644
index 00000000..1fb43c9d
Binary files /dev/null and b/seller/src/assets/decorate10.jpeg differ
diff --git a/seller/src/assets/decorate11.jpeg b/seller/src/assets/decorate11.jpeg
new file mode 100644
index 00000000..50612270
Binary files /dev/null and b/seller/src/assets/decorate11.jpeg differ
diff --git a/seller/src/assets/decorate2.jpeg b/seller/src/assets/decorate2.jpeg
new file mode 100644
index 00000000..3d98ffdd
Binary files /dev/null and b/seller/src/assets/decorate2.jpeg differ
diff --git a/seller/src/assets/decorate3.jpeg b/seller/src/assets/decorate3.jpeg
new file mode 100644
index 00000000..8274bba5
Binary files /dev/null and b/seller/src/assets/decorate3.jpeg differ
diff --git a/seller/src/assets/decorate4.jpeg b/seller/src/assets/decorate4.jpeg
new file mode 100644
index 00000000..387b8d0f
Binary files /dev/null and b/seller/src/assets/decorate4.jpeg differ
diff --git a/seller/src/assets/decorate5.jpeg b/seller/src/assets/decorate5.jpeg
new file mode 100644
index 00000000..a0dcd195
Binary files /dev/null and b/seller/src/assets/decorate5.jpeg differ
diff --git a/seller/src/assets/decorate6.jpeg b/seller/src/assets/decorate6.jpeg
new file mode 100644
index 00000000..be4041ea
Binary files /dev/null and b/seller/src/assets/decorate6.jpeg differ
diff --git a/seller/src/assets/decorate7.jpeg b/seller/src/assets/decorate7.jpeg
new file mode 100644
index 00000000..5e333e30
Binary files /dev/null and b/seller/src/assets/decorate7.jpeg differ
diff --git a/seller/src/assets/decorate8.png b/seller/src/assets/decorate8.png
new file mode 100644
index 00000000..75ecb1f9
Binary files /dev/null and b/seller/src/assets/decorate8.png differ
diff --git a/seller/src/assets/decorate9.png b/seller/src/assets/decorate9.png
new file mode 100644
index 00000000..36a6e1ca
Binary files /dev/null and b/seller/src/assets/decorate9.png differ
diff --git a/seller/src/assets/festival_icon.png b/seller/src/assets/festival_icon.png
new file mode 100644
index 00000000..eec2f202
Binary files /dev/null and b/seller/src/assets/festival_icon.png differ
diff --git a/seller/src/assets/iPhoneX_model.png b/seller/src/assets/iPhoneX_model.png
new file mode 100644
index 00000000..1db47b00
Binary files /dev/null and b/seller/src/assets/iPhoneX_model.png differ
diff --git a/seller/src/assets/nav/1.jpg b/seller/src/assets/nav/1.jpg
index de03b9f6..a978a951 100644
Binary files a/seller/src/assets/nav/1.jpg and b/seller/src/assets/nav/1.jpg differ
diff --git a/seller/src/assets/nav/4.jpg b/seller/src/assets/nav/4.jpg
index 64083220..e2b23e98 100644
Binary files a/seller/src/assets/nav/4.jpg and b/seller/src/assets/nav/4.jpg differ
diff --git a/seller/src/assets/nav/decorate.png b/seller/src/assets/nav/decorate.png
new file mode 100644
index 00000000..675eb8c6
Binary files /dev/null and b/seller/src/assets/nav/decorate.png differ
diff --git a/seller/src/assets/nav/decorate1.png b/seller/src/assets/nav/decorate1.png
new file mode 100644
index 00000000..57277747
Binary files /dev/null and b/seller/src/assets/nav/decorate1.png differ
diff --git a/seller/src/assets/nav/decorate10.jpeg b/seller/src/assets/nav/decorate10.jpeg
new file mode 100644
index 00000000..1fb43c9d
Binary files /dev/null and b/seller/src/assets/nav/decorate10.jpeg differ
diff --git a/seller/src/assets/nav/decorate11.jpeg b/seller/src/assets/nav/decorate11.jpeg
new file mode 100644
index 00000000..50612270
Binary files /dev/null and b/seller/src/assets/nav/decorate11.jpeg differ
diff --git a/seller/src/assets/nav/decorate2.jpeg b/seller/src/assets/nav/decorate2.jpeg
new file mode 100644
index 00000000..3d98ffdd
Binary files /dev/null and b/seller/src/assets/nav/decorate2.jpeg differ
diff --git a/seller/src/assets/nav/decorate3.jpeg b/seller/src/assets/nav/decorate3.jpeg
new file mode 100644
index 00000000..8274bba5
Binary files /dev/null and b/seller/src/assets/nav/decorate3.jpeg differ
diff --git a/seller/src/assets/nav/decorate4.jpeg b/seller/src/assets/nav/decorate4.jpeg
new file mode 100644
index 00000000..387b8d0f
Binary files /dev/null and b/seller/src/assets/nav/decorate4.jpeg differ
diff --git a/seller/src/assets/nav/decorate5.jpeg b/seller/src/assets/nav/decorate5.jpeg
new file mode 100644
index 00000000..a0dcd195
Binary files /dev/null and b/seller/src/assets/nav/decorate5.jpeg differ
diff --git a/seller/src/assets/nav/decorate6.jpeg b/seller/src/assets/nav/decorate6.jpeg
new file mode 100644
index 00000000..be4041ea
Binary files /dev/null and b/seller/src/assets/nav/decorate6.jpeg differ
diff --git a/seller/src/assets/nav/decorate7.jpeg b/seller/src/assets/nav/decorate7.jpeg
new file mode 100644
index 00000000..5e333e30
Binary files /dev/null and b/seller/src/assets/nav/decorate7.jpeg differ
diff --git a/seller/src/assets/nav/decorate8.png b/seller/src/assets/nav/decorate8.png
new file mode 100644
index 00000000..75ecb1f9
Binary files /dev/null and b/seller/src/assets/nav/decorate8.png differ
diff --git a/seller/src/assets/nav/decorate9.png b/seller/src/assets/nav/decorate9.png
new file mode 100644
index 00000000..36a6e1ca
Binary files /dev/null and b/seller/src/assets/nav/decorate9.png differ
diff --git a/seller/src/assets/nav/nav_showimg1.jpg b/seller/src/assets/nav/nav_showimg1.jpg
index f13f536e..450a66ec 100644
Binary files a/seller/src/assets/nav/nav_showimg1.jpg and b/seller/src/assets/nav/nav_showimg1.jpg differ
diff --git a/seller/src/assets/nav/nav_showimg2.jpg b/seller/src/assets/nav/nav_showimg2.jpg
index 9def75e0..99ed9c63 100644
Binary files a/seller/src/assets/nav/nav_showimg2.jpg and b/seller/src/assets/nav/nav_showimg2.jpg differ
diff --git a/seller/src/assets/nav_showimg1.jpg b/seller/src/assets/nav_showimg1.jpg
new file mode 100644
index 00000000..450a66ec
Binary files /dev/null and b/seller/src/assets/nav_showimg1.jpg differ
diff --git a/seller/src/assets/nav_showimg2.jpg b/seller/src/assets/nav_showimg2.jpg
new file mode 100644
index 00000000..99ed9c63
Binary files /dev/null and b/seller/src/assets/nav_showimg2.jpg differ
diff --git a/seller/src/assets/play.png b/seller/src/assets/play.png
new file mode 100644
index 00000000..49fad9f5
Binary files /dev/null and b/seller/src/assets/play.png differ
diff --git a/seller/src/assets/seckillBg.png b/seller/src/assets/seckillBg.png
new file mode 100644
index 00000000..16415eaf
Binary files /dev/null and b/seller/src/assets/seckillBg.png differ
diff --git a/seller/src/libs/routerJson.js b/seller/src/libs/routerJson.js
index 216fe8a8..cf1f61c9 100644
--- a/seller/src/libs/routerJson.js
+++ b/seller/src/libs/routerJson.js
@@ -415,6 +415,7 @@ export const result = [{
           }
         ]
       },
+
       {
         name: "shop",
         level: 1,
@@ -423,7 +424,28 @@ export const result = [{
         path: "/shop",
         component: "Main",
         description: "",
-        children: [{
+        children: [
+          {
+              name: "wapList",
+              level: 2,
+              type: 0,
+              title: "移动楼层",
+              path: "wapList",
+              component: "shop/wap/wapList",
+              children: null
+
+          },
+          {
+              name: "pcList",
+              level: 2,
+              type: 0,
+              title: "PC楼层",
+              path: "pcList",
+              component: "shop/floorList",
+              children: null
+
+          },
+         {
             name: "shopSetting",
             level: 2,
             type: 0,
@@ -469,5 +491,6 @@ export const result = [{
         children: null
       }]
     }]
-  }
+  },
+
 ];
diff --git a/seller/src/main.js b/seller/src/main.js
index 5d9c5016..8087da8e 100644
--- a/seller/src/main.js
+++ b/seller/src/main.js
@@ -21,7 +21,7 @@ import { setStore, getStore, removeStore } from "@/libs/storage";
 import i18nBox from '@/views/lili-components/i18n-translate'
 import util from "@/libs/util";
 
-
+import liliDialog from '@/views/lili-dialog'
 import VueLazyload from "vue-lazyload";
 
 import * as filters from "@/utils/filters"; // global filter
@@ -35,6 +35,7 @@ Vue.use(VueLazyload, {
 });
 
 Vue.use(ViewUI);
+Vue.component('liliDialog',liliDialog)
 Vue.component('i18nBox',i18nBox)
 Vue.component("vue-qr", vueQr); //此处将vue-qr添加为全局组件
 
@@ -84,7 +85,7 @@ new Vue({
   mounted() {
     // 初始化菜单
     util.initRouter(this);
-   
+
     this.currentPageName = this.$route.name;
     // 显示打开的页面的列表
     this.$store.commit("setOpenedList");
diff --git a/seller/src/router/router.js b/seller/src/router/router.js
index 1580372b..37bc2e57 100644
--- a/seller/src/router/router.js
+++ b/seller/src/router/router.js
@@ -133,7 +133,21 @@ export const otherRouter = {
       title: "订单详情",
       name: "order-detail",
       component: () => import("@/views/order/order/orderDetail.vue")
-    }
+    },
+    {
+      path: "/floorList/main",
+      title: "编辑模板",
+      name: "main",
+      component: () => import("@/views/shop/wap/main.vue")
+    },
+    {
+      path: "/pcFloorList/main",
+      title: "编辑模板",
+      name: "renovation",
+      component: () => import("@/views/shop/renovation.vue")
+    },
+
+
 
     // {
     //   path: "/*",
diff --git a/seller/src/views/lili-dialog/goods-dialog.vue b/seller/src/views/lili-dialog/goods-dialog.vue
index aa5ccb4a..307385ea 100644
--- a/seller/src/views/lili-dialog/goods-dialog.vue
+++ b/seller/src/views/lili-dialog/goods-dialog.vue
@@ -14,7 +14,7 @@
           <Button type="primary" @click="goodsData=[]; getQueryGoodsList();" icon="ios-search">搜索</Button>
         </div>
       </div>
-      <div style="positon:retavle;">
+      <div >
         <Scroll class="wap-content-list" :on-reach-bottom="handleReachBottom" :distance-to-edge="[3,3]">
 
           <div class="wap-content-item" :class="{ active: item.selected }" @click="checkedGoods(item, index)" v-for="(item, index) in goodsData" :key="index">
diff --git a/seller/src/views/lili-dialog/link-dialog.vue b/seller/src/views/lili-dialog/link-dialog.vue
index 4a48d6fc..02fa89d6 100644
--- a/seller/src/views/lili-dialog/link-dialog.vue
+++ b/seller/src/views/lili-dialog/link-dialog.vue
@@ -1,85 +1,55 @@
 <template>
   <div class="wrapper">
-    <div class="wap-list">
-      <div
-        class="wap-item"
-        @click="clickTag(item, i)"
-        v-for="(item, i) in wap"
-        :key="i"
-        :class="{ active: selected == i }"
-      >
-        {{ item.title }}
-      </div>
-    </div>
-    <div class="wap-content"></div>
 
-    <!-- 弹出选择商品的modal -->
-    <Modal
-      title="选择"
-      :styles="{ top: '120px' }"
-      width="750"
-      @on-cancel="clickClose"
-      @on-ok="clickClose"
-      v-model="flag"
-      :mask-closable="false"
-      scrollable
-    >
-      <goodsDialog
-        @selected="
+    <Tabs :value="wap[0].title" class="tabs">
+
+      <TabPane :label="item.title" :name="item.title" @click="clickTag(item, i)" v-for="(item, i) in wap" :key="i">
+        <component ref="lili-component" :is="templateWay[item.name]" @selected="
           (val) => {
-            goodsData = val;
+            changed = val;
           }
-        "
-        ref="goodsDialog"
-      />
-    </Modal>
+        " />
+      </TabPane>
+    </Tabs>
+
   </div>
 </template>
 <script>
 import wap from "./wap.js";
 import goodsDialog from "./goods-dialog";
+import templateWay from "./template/index";
 export default {
   components: {
     goodsDialog,
   },
   data() {
     return {
-      goodsData: "", // 商品列表
-      flag: false, // 控制商品模块显隐
-      selected: 0, // 已选模块
+      templateWay, // 模板数据
+      changed: "", // 变更模板
+      selected: 0, // 已选数据
       selectedLink: "", //选中的链接
-      wap, // tab标签栏数据
+      wap  // tab标签
     };
   },
   watch: {
-    selectedLink(val) {
-      this.$emit("selectedLink", val);
+    changed: {
+      handler(val) {
+        this.$emit("selectedLink", val[0]); //因为是单选，所以直接返回第一个
+      },
+      deep: true,
     },
   },
   mounted() {
+    this.$nextTick(() => {
+      console.log( this.$refs["lili-component"])
+      this.$refs["lili-component"][0].type = "single"; //商品页面设置成为单选
+    });
+
     this.wap.forEach((item) => {
       item.selected = false;
     });
   },
-  methods: {
-    clickClose() {
-      this.flag = false;
-    },
-
-    // 点击链接
-    clickTag(val, i) {
-      this.selected = i;
-      if (!val.openGoods) {
-        this.selectedLink = val;
-      }
-      //   打开选择商品
-      else {
-        this.$refs.goodsDialog.selectedWay = [];
-        this.$refs.goodsDialog.type = "single";
-        this.flag = true;
-      }
-    },
-  },
+  methods: {},
 };
 </script>
 <style scoped lang="scss">
@@ -91,6 +61,9 @@ export default {
 .wap-flex {
   margin: 2px;
 }
+.tabs {
+  width: 100%;
+}
 
 /deep/ .ivu-modal {
   overflow: hidden;
@@ -101,4 +74,4 @@ export default {
   height: 500px;
   overflow: hidden;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/seller/src/views/lili-dialog/template/category.vue b/seller/src/views/lili-dialog/template/category.vue
new file mode 100644
index 00000000..0c2f0eed
--- /dev/null
+++ b/seller/src/views/lili-dialog/template/category.vue
@@ -0,0 +1,121 @@
+<template>
+  <div class="wrapper">
+    <!-- 一级分类 -->
+    <div class="list">
+      <div class="list-item" :class="{active:parentIndex === cateIndex}" @click="handleClickChild(cate,cateIndex)" v-for="(cate,cateIndex) in categoryList" :key="cateIndex">
+        {{cate.name}}
+      </div>
+    </div>
+    <!-- 二级分类 -->
+    <div class="list">
+      <div class="list-item" :class="{active:secondIndex === secondI}" @click="handleClickSecondChild(second,secondI)" v-if="secondLevel.length != 0" v-for="(second,secondI) in secondLevel"
+        :key="secondI">
+        {{second.name}}
+      </div>
+    </div>
+    <!--三级分类 -->
+    <div class="list">
+      <div class="list-item" :class="{active:thirdIndex === thirdI}" @click="handleClickthirdChild(third,thirdI)" v-if="thirdLevel.length != 0" v-for="(third,thirdI) in thirdLevel" :key="thirdI">
+        {{third.name}}
+      </div>
+    </div>
+  </div>
+
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+      parentIndex: '', // 分类父级下标
+      secondIndex: '', // 分类二级下标
+      thirdIndex: '', // 分类三级下标
+      categoryList: [], // 分类列表一级数据
+      secondLevel: [], // 分类列表二级数据
+      thirdLevel: [], // 分类列表三级数据
+      selectedData: "", // 已选分类数据
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    // 点击一级
+    handleClickChild(item, index) {
+      this.parentIndex = index;
+      this.secondLevel = item.children;
+      item.___type = "category";
+      item.allId = item.id;
+
+      this.secondIndex = '';
+      this.thirdIndex = '';
+      this.thirdLevel = []
+      this.$emit("selected", [item]);
+      // 点击第一级的时候默认显示第二级第一个
+      // this.handleClickSecondChild(item.children, 0);
+    },
+    // 点击二级
+    handleClickSecondChild(second, index) {
+      second.___type = "category";
+      second.allId = `${second.parentId},${second.id}`
+
+      this.secondIndex = index;
+      this.thirdLevel = second.children;
+      this.thirdIndex = '';
+      this.$emit("selected", [second]);
+      // this.handleClickthirdChild(second.children[0], 0);
+    },
+    // 点击三级
+    handleClickthirdChild(item, index) {
+      item.___type = "category";
+      item.allId = `${this.categoryList[this.parentIndex].id},${item.parentId},${item.id}`
+      this.$emit("selected", [item]);
+      this.thirdIndex = index;
+    },
+    init() {
+
+
+      let category = JSON.parse(localStorage.getItem('category'))
+      if (category) {
+        category.forEach((item) => {
+          item.___type = "category";
+        });
+        this.categoryList = category;
+        // this.handleClickChild(category[0], 0);
+      } else {
+        setTimeout(() => {
+          category = JSON.parse(localStorage.getItem('category'))
+          category.forEach((item) => {
+            item.___type = "category";
+          });
+          this.categoryList = category;
+          // this.handleClickChild(category[0], 0);
+        },3000)
+      }
+
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.list {
+  width: 30%;
+  margin: 0 1.5%;
+  height: 400px;
+  overflow: auto;
+  > .list-item {
+    padding: 10px;
+    transition: 0.35s;
+    cursor: pointer;
+  }
+  .list-item:hover {
+    background: #ededed;
+  }
+}
+.active {
+  background: #ededed;
+}
+.wrapper {
+  overflow: hidden;
+}
+</style>
diff --git a/seller/src/views/lili-dialog/template/index.js b/seller/src/views/lili-dialog/template/index.js
new file mode 100644
index 00000000..6afe1fff
--- /dev/null
+++ b/seller/src/views/lili-dialog/template/index.js
@@ -0,0 +1,15 @@
+
+import category from './category.vue'
+import shops from './shops.vue'
+
+import pages from './pages.vue'
+import goods from '../goods-dialog.vue'
+import other from './other.vue'
+export default {
+  // pages,
+
+  // shops,
+  category,
+  goods,
+  other,
+}
diff --git a/seller/src/views/lili-dialog/template/other.vue b/seller/src/views/lili-dialog/template/other.vue
new file mode 100644
index 00000000..bc74ad71
--- /dev/null
+++ b/seller/src/views/lili-dialog/template/other.vue
@@ -0,0 +1,141 @@
+<template>
+  <div>
+    <Row :gutter="30">
+      <Col span="6" v-for="(item,index) in linkList" :key="index" v-if="(item.title !== '拼团频道' && item.title !== '签到') || $route.name !== 'renovation'">
+        <div class="card" :class="{'active':selectedIndex == index}" @click="handleLink(item,index)">
+          <Icon size="24" :type="item.icon" />
+          <p>{{item.title}}</p>
+        </div>
+      </Col>
+      <!-- 外部链接，只有pc端跳转 -->
+      <Col span="6" v-if="$route.name === 'renovation'">
+        <div class="card" :class="{'active':selectedIndex == linkList.length}" @click="handleLink(linkItem,linkList.length)">
+          <Poptip v-model="linkVisible">
+              <Icon size="24" :type="linkItem.icon" />
+              <p>{{linkItem.title}}</p>
+              <div slot="title">链接地址</div>
+              <div slot="content">
+                  <Input type="text" @keyup="handleLink(linkItem,linkList.length)" v-model="linkItem.url" placeholder="https://"></Input>
+              </div>
+          </Poptip>
+
+        </div>
+      </Col>
+    </Row>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      linkList: [ // 链接列表
+        {
+          title: "首页",
+          icon: "md-home",
+          ___type: "home",
+        },
+        {
+          title: "购物车",
+          icon: "md-cart",
+          ___type: "cart",
+        },
+        {
+          title: "收藏商品",
+          icon: "md-heart",
+          ___type: "collection",
+        },
+        {
+          title: "我的订单",
+          icon: "md-document",
+          ___type: "order",
+        },
+        {
+          title: "个人中心",
+          icon: "md-person",
+          ___type: "user",
+        },
+        {
+          title: "拼团频道",
+          icon: "md-flame",
+          ___type: "group",
+        },
+        {
+          title: "秒杀频道",
+          icon: "md-flame",
+          ___type: "seckill",
+        },
+        {
+          title: "领券中心",
+          icon: "md-pricetag",
+          ___type: "coupon",
+        },
+        {
+          title: "签到",
+          icon: "md-happy",
+          ___type: "sign",
+        },
+        // {
+        //   title: "小程序直播",
+        //   icon: "ios-videocam",
+        //   ___type: "live",
+        // },
+        {
+          title: "砍价",
+          icon: "md-share-alt",
+          ___type: "kanjia",
+        },
+        {
+          title: "积分商城",
+          icon: "ios-basket",
+          ___type: "point",
+        },
+
+      ],
+      linkItem: {
+        title: "外部链接",
+        icon: "ios-link",
+        ___type: "link",
+        url: ''
+      },
+      linkVisible: false, // 是否显示外部链接
+      selectedIndex: 9999999, // 已选index
+    };
+  },
+  methods: {
+    handleLink(val, index) {
+      val = {...val,___type:'other'}
+      this.selectedIndex = index;
+      if (index === this.linkList.length) {
+        this.linkVisible = true
+      } else {
+        this.linkVisible = false
+      }
+      this.$emit("selected",[val])
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "../style.scss";
+.card {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  padding: 20px 0;
+  margin: 10px 0;
+  text-align: center;
+  transition: 0.35s;
+  cursor: pointer;
+  /deep/ p {
+    margin: 10px 0;
+  }
+  border: 1px solid #ededed;
+}
+.card:hover{
+   background: #ededed;
+}
+.active {
+  background: #ededed;
+}
+</style>
diff --git a/seller/src/views/lili-dialog/template/pages.vue b/seller/src/views/lili-dialog/template/pages.vue
new file mode 100644
index 00000000..407de5b7
--- /dev/null
+++ b/seller/src/views/lili-dialog/template/pages.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="wrapper">
+    <!-- TODO 目前数据少暂且不用 -->
+    <!-- <div class="list">
+      <div class="list-item active">
+        文章页
+      </div>
+    </div> -->
+    <div class="content">
+      <!-- <Article @callbacked="callbackArticle" :selected="true" /> -->
+    </div>
+
+  </div>
+</template>
+<script>
+// import Article from "@/views/page/article-manage/articleList.vue";
+export default {
+  components: {
+    // Article,
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    callbackArticle(val) {
+      val.___type = "pages";
+
+      val.___path = "/pages/passport/article";
+
+      this.$emit("selected", [val]);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+/deep/ .ivu-card-body {
+  height: 414px;
+  overflow: auto;
+}
+.ivu-table-wrapper ivu-table-wrapper-with-border {
+  height: 300px !important;
+}
+.list {
+  margin: 0 1.5%;
+  height: 400px;
+  overflow: auto;
+  > .list-item {
+    padding: 10px;
+    transition: 0.35s;
+    cursor: pointer;
+  }
+  .list-item:hover {
+    background: #ededed;
+  }
+}
+.list {
+  flex: 2;
+  width: auto;
+}
+.content {
+  overflow: hidden;
+  flex: 8;
+  height: 431px;
+}
+.active {
+  background: #ededed;
+}
+.wrapper {
+  height: 416px;
+  overflow: hidden;
+}
+/deep/ .ivu-table {
+  height: 300px !important;
+  overflow: auto;
+}
+/deep/ .ivu-card-body {
+  padding: 0;
+  height: auto;
+}
+</style>
diff --git a/seller/src/views/lili-dialog/template/shops.vue b/seller/src/views/lili-dialog/template/shops.vue
new file mode 100644
index 00000000..fae0ad50
--- /dev/null
+++ b/seller/src/views/lili-dialog/template/shops.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="shop">
+    <div class="wap-content">
+      <div class="query-wrapper">
+        <div class="query-item">
+          <div>店铺名称</div>
+          <Input placeholder="请输入店铺名称" @on-clear="shopsData=[]; params.storeName=''; params.pageNumber =1; init()" @on-enter="()=>{shopsData=[]; params.pageNumber =1; init();}" icon="ios-search" clearable style="width: 150px"
+            v-model="params.storeName" />
+        </div>
+
+        <div class="query-item">
+          <Button type="primary" @click="shopsData=[];params.pageNumber =1; init();" icon="ios-search">搜索</Button>
+        </div>
+      </div>
+      <div>
+        <Scroll class="wap-content-list" :on-reach-bottom="handleReachBottom" :distance-to-edge="23">
+          <div class="wap-content-item" @click="clickShop(item,index)" :class="{ active:selected == index }" v-for="(item, index) in shopsData" :key="index">
+            <div>
+              <img class="shop-logo" :src="item.storeLogo" alt="" />
+            </div>
+            <div class="wap-content-desc">
+              <div class="wap-content-desc-title">{{ item.storeName }}</div>
+
+              <div class="self-operated" :class="{'theme_color':item.selfOperated }">{{ item.selfOperated ? '自营' : '非自营' }}</div>
+              <div class="wap-sku" :class="{'theme_color':(item.storeDisable === 'OPEN' ? true : false) }">{{ item.storeDisable === 'OPEN' ? '开启中' : '未开启' }}</div>
+            </div>
+          </div>
+          <Spin size="large" fix v-if="loading"></Spin>
+        </Scroll>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getShopListData } from "@/api/shops.js";
+export default {
+  data() {
+    return {
+      loading: false, // 加载状态
+      total: "", // 总数
+      params: { // 请求参数
+        pageNumber: 1,
+        pageSize: 10,
+        storeDisable: "OPEN",
+        storeName: "",
+      },
+      shopsData: [], // 店铺数据
+      selected: 9999999999, //设置一个不可能选中的index
+    };
+  },
+  watch: {},
+
+  created() {
+    this.init();
+  },
+  methods: {
+    handleReachBottom() {
+      setTimeout(() => {
+        if (this.params.pageNumber * this.params.pageSize <= this.total) {
+          this.params.pageNumber++;
+          this.init();
+        }
+      }, 1500);
+    },
+    init() {
+      this.loading = true;
+      getShopListData(this.params).then((res) => {
+        if (res.success) {
+          /**
+           * 解决数据请求中，滚动栏会一直上下跳动
+           */
+          this.total = res.result.total;
+
+          this.shopsData.push(...res.result.records);
+
+          this.loading = false;
+        }
+      });
+    },
+    clickShop(val, i) {
+      this.selected = i;
+      val = { ...val, ___type: "shops" };
+      this.$emit("selected", [val]);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "../style.scss";
+.shop {
+  display: flex;
+}
+.self-operated {
+  font-size: 12px;
+  color: #999;
+}
+.wap-content-list {
+  flex-wrap: wrap;
+}
+.shop-logo {
+  object-fit: cover;
+}
+.wap-content-item {
+}
+.active {
+  background: url("../../../assets/selected.png") no-repeat;
+  background-position: right;
+  background-size: 10%;
+}
+</style>
diff --git a/seller/src/views/lili-dialog/wap.js b/seller/src/views/lili-dialog/wap.js
index 26f96c05..7aafb673 100644
--- a/seller/src/views/lili-dialog/wap.js
+++ b/seller/src/views/lili-dialog/wap.js
@@ -1,25 +1,29 @@
 export default [
-    {
-        title:"商品",
-        url:"0",
-        openGoods:true
-    },
-    {
-        title:"分类",
-        url:"1"
-    },
-    {
-        title:"店铺",
-        url:"2"
-    },
-    {
-        title:"活动",
-        url:"3",
-     
-    },
-    {
-        title:"其他",
-        url:"4"
-    }
+  {
+    title: "商品",
+    url: "0",
+    openGoods: true,
+    name: "goods"
+  },
+  // {
+  //   title: "分类",
+  //   url: "1",
+  //   name: "category"
+  // },
 
+  // {
+  //   title: "活动",
+  //   url: "3",
+  //   name: "marketing"
+  // },
+  // {
+  //   title: "页面",
+  //   url: "3",
+  //   name: "pages"
+  // },
+  {
+    title: "其他",
+    url: "3",
+    name: "other"
+  }
 ];
diff --git a/seller/src/views/shop/floorList.vue b/seller/src/views/shop/floorList.vue
new file mode 100644
index 00000000..07364379
--- /dev/null
+++ b/seller/src/views/shop/floorList.vue
@@ -0,0 +1,286 @@
+<template>
+  <div class="wrapper">
+    <!-- <Card class="category">
+      <div
+        :class="{ active: i == selectedIndex }"
+        class="category-item"
+        v-for="(typeItem, i) in pageTypes"
+        :key="typeItem.type"
+      >
+        <div @click="clickType(typeItem.type, i)">{{ typeItem.title }}</div>
+      </div>
+    </Card> -->
+    <Card class="content">
+      <Button type="primary" @click="createTemp">添加页面</Button>
+      <div class="list">
+        <Spin size="large" fix v-if="loading"></Spin>
+        <div class="item item-title">
+          <div>页面名称</div>
+          <div class="item-config">
+            <div>状态</div>
+            <div>操作</div>
+          </div>
+        </div>
+
+        <div class="item" v-for="(item, index) in list" :key="index">
+          <div>{{ item.name || "暂无模板昵称" }}</div>
+          <div class="item-config">
+            <i-switch v-model="item.pageShow" @on-change="releaseTemplate(item.id)">
+              <span slot="open">开</span>
+              <span slot="close">关</span>
+            </i-switch>
+            <Button type="info" placement="right" @click="Template(item)" size="small"
+              >编辑</Button
+            >
+            <Button type="success" placement="right" @click="decorate(item)" size="small"
+              >装修</Button
+            >
+            <Poptip confirm title="删除此模板？" @on-ok="delTemplate(item.id)">
+              <Button type="error" size="small">删除</Button>
+            </Poptip>
+          </div>
+        </div>
+        <div class="no-more" v-if="list.length == 0">暂无更多模板</div>
+      </div>
+      <Page show-total :total="total" show-sizer  :page-size-opts="[10, 20, 50]" show-elevator style="float:right;overflow:hidden;"  @on-change="changePageNum" @on-page-size-change="changePageSize" :page-size="searchForm.pageSize"/>
+    </Card>
+    <Modal
+      v-model="showModal"
+      title="模板设置"
+      draggable
+      width="600"
+      :z-index="100"
+      :loading="loading"
+      :mask-closable="false"
+      @on-ok="newTemplate"
+      @on-cancel="showModal = false"
+    >
+      <Form ref="form" :model="formData" :label-width="80">
+        <FormItem label="模板名称" prop="name">
+          <Input v-model="formData.name" placeholder="请输入模板名称" />
+        </FormItem>
+      </Form>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import * as API_floor from "@/api/other.js";
+export default {
+  name: "floorList",
+  data() {
+    return {
+      showModal: false, // 添加modal的显示
+      selectedIndex: 0, // 首页还是专题选择的index
+      total:0,
+      formData: {
+        // 新建模态框的数据
+        status: false, // 模板是否开启
+        name: "", // 模板名称
+      },
+      searchForm:{
+        pageNumber:1,
+        pageSize:10,
+        sort: 'createTime',
+        order: 'desc',
+        pageClientType:'PC'
+      },
+      columns: [
+        // 列表展示的column
+        {
+          title: "页面名称",
+          key: "name",
+        },
+        {
+          title: "状态",
+        },
+        {
+          title: "操作",
+          key: "action",
+        },
+      ],
+
+      loading: false, // 加载状态
+      pageTypes: [
+        // 那种类别的模板
+        {
+          type: "INDEX",
+          title: "首页",
+        },
+        // {
+        //   type: "SPECIAL",
+        //   title: "专题",
+        // },
+      ],
+      list: [], // 模板列表
+    };
+  },
+  mounted() {
+    this.getTemplateList();
+  },
+  methods: {
+    newTemplate() {
+      // 添加，编辑模板
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          const data = this.formData;
+          data.status ? (data.pageShow = "OPEN") : (data.pageShow = "CLOSE");
+          delete data.status;
+          (data.pageType = "INDEX"), (data.pageClientType = "PC");
+          if (data.id) {
+            API_floor.updateHome(data.id, data).then((res) => {
+              this.$Message.success("编辑模板成功");
+              this.showModal = false;
+              this.getTemplateList();
+            });
+          } else {
+            API_floor.setHomeSetup(data).then((res) => {
+              this.$Message.success("新建模板成功");
+              this.showModal = false;
+              this.getTemplateList();
+            });
+          }
+        } else {
+          this.loading = false;
+        }
+      });
+    },
+
+    createTemp() {
+      // 新建表单
+      this.$refs.form.resetFields();
+      this.showModal = true;
+    },
+
+    Template(item) {
+      // 编辑表单
+      item.status = item.pageShow;
+      this.formData = item;
+      this.showModal = true;
+    },
+
+    decorate(val) {
+      // 装修
+      this.$router.push({
+        name: "renovation",
+        query: { id: val.id, pageShow: val.pageShow },
+      });
+    },
+
+     // 分页 修改页码
+    changePageNum (val) {
+      this.searchForm.pageNumber = val;
+      this.getTemplateList();
+    },
+     // 分页 修改页数
+    changePageSize (val) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = val;
+      this.getTemplateList();
+    },
+    getTemplateList() {
+      //模板列表
+      // let params = {
+      //   pageNumber: 1,
+      //   pageSize: 999,
+      //   pageType: "INDEX",
+      //   pageClientType: "PC",
+      // };
+      API_floor.getHomeList(this.searchForm).then((res) => {
+        if (res.success) {
+          // this.total
+          this.total = res.result.total
+          this.list = res.result.records;
+          this.list.forEach((e) => {
+            if (e.pageShow === "OPEN") {
+              e.pageShow = true;
+            } else {
+              e.pageShow = false;
+            }
+          });
+        }
+      });
+    },
+
+    releaseTemplate(id) {
+      //发布模板
+      API_floor.releasePageHome(id).then((res) => {
+        if (res.success) {
+          this.$Message.success("发布模板成功");
+          this.getTemplateList();
+        }
+      });
+    },
+    // 删除模板
+    delTemplate(id) {
+      API_floor.removePageHome(id).then((res) => {
+        if (res.success) {
+          this.$Message.success("删除模板成功");
+          this.getTemplateList();
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.category-item {
+  cursor: pointer;
+  padding: 4px;
+}
+.active {
+  background: #ededed;
+}
+.item-title {
+  background: #d7e7f5 !important;
+  height: 54px;
+}
+.no-more {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.wrapper {
+  background: #fff;
+  padding: 20px;
+  display: flex;
+}
+.category {
+  flex: 2;
+}
+.content {
+  flex: 8;
+}
+* {
+  margin: 5px;
+}
+.list {
+  min-height: 600px;
+  position: relative;
+}
+.item:nth-of-type(2) {
+  margin: 0 5px;
+}
+.item {
+  width: 100% !important;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  > .item-config {
+    width: 250px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    div:nth-child(2) {
+      margin-right: 80px;
+    }
+  }
+}
+.item:nth-of-type(2n + 1) {
+  background: #f5f7fa;
+}
+</style>
diff --git a/seller/src/views/shop/modelConfig.js b/seller/src/views/shop/modelConfig.js
new file mode 100644
index 00000000..7b500904
--- /dev/null
+++ b/seller/src/views/shop/modelConfig.js
@@ -0,0 +1,955 @@
+export const modelData = [{
+    type: 'carousel',
+    name: '图片轮播',
+    icon: 'md-image',
+    showName: '',
+    size: "790*340",
+    options: {
+      list: [{
+          img: require('@/assets/nav/1.jpg'),
+          url: ''
+        },
+        {
+          img: require('@/assets/nav/2.jpg'),
+          url: ''
+        },
+        {
+          img: require('@/assets/nav/3.jpg'),
+          url: ''
+        }
+      ],
+    },
+  },
+//   {
+//     type: 'carousel1',
+//     name: '图片轮播1',
+//     icon: 'md-image',
+//     size: "1200*470",
+//     options: {
+//       list: [{
+//           img: require('@/assets/nav/1.jpg'),
+//           url: '',
+//           bgColor: 'yellow'
+//         },
+//         {
+//           img: require('@/assets/nav/2.jpg'),
+//           url: '',
+//           bgColor: 'purple'
+//         },
+//         {
+//           img: require('@/assets/nav/3.jpg'),
+//           url: '',
+//           bgColor: 'blue'
+//         }
+//       ],
+//     },
+//   },
+//   {
+//     type: 'carousel2',
+//     name: '图片轮播2',
+//     icon: 'md-image',
+//     size: "590*470",
+//     options: {
+//       list: [{
+//           img: require('@/assets/nav/1.jpg'),
+//           url: ''
+//         },
+//         {
+//           img: require('@/assets/nav/2.jpg'),
+//           url: ''
+//         },
+//         {
+//           img: require('@/assets/nav/3.jpg'),
+//           url: ''
+//         }
+//       ],
+//       listRight: [
+//         [{
+//             img: require('@/assets/nav/1.jpg'),
+//             url: ''
+//           },
+//           {
+//             img: require('@/assets/nav/2.jpg'),
+//             url: ''
+//           },
+//           {
+//             img: require('@/assets/nav/3.jpg'),
+//             url: ''
+//           }
+//         ],
+//         [{
+//             img: require('@/assets/nav/1.jpg'),
+//             url: ''
+//           },
+//           {
+//             img: require('@/assets/nav/2.jpg'),
+//             url: ''
+//           },
+//           {
+//             img: require('@/assets/nav/3.jpg'),
+//             url: ''
+//           }
+//         ],
+//       ]
+//     },
+//   },
+  {
+    type: 'hotAdvert',
+    name: '热门广告',
+    icon: 'md-image',
+    showName: '',
+    options: {
+      list: [{
+          img: require('@/assets/nav/decorate1.png'),
+          url: '',
+          size: '1200*自定义'
+        },
+        {
+          img: require('@/assets/nav/1.jpg'),
+          url: '',
+          size: '230*190'
+        },
+        {
+          img: require('@/assets/nav/1.jpg'),
+          url: '',
+          size: '230*190'
+        },
+        {
+          img: require('@/assets/nav/1.jpg'),
+          url: '',
+          size: '230*190'
+        },
+        {
+          img: require('@/assets/nav/1.jpg'),
+          url: '',
+          size: '230*190'
+        },
+        {
+          img: require('@/assets/nav/1.jpg'),
+          url: '',
+          size: '230*190'
+        }
+      ],
+    },
+  },
+  {
+    type: 'seckill',
+    name: '促销活动',
+    icon: 'md-image',
+    showName: '',
+    options: {
+      list: [{
+          time: 6,
+          goodsList: [{
+              img: require('@/assets/nav/1.jpg'),
+              price: 20,
+              originalPrice: 30,
+              name: '阿迪达斯三叶草asdasdafads123213a',
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/2.jpg'),
+              price: 20,
+              originalPrice: 30,
+              name: '阿迪达斯三叶草asdasdafadsa',
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/3.jpg'),
+              price: 20,
+              originalPrice: 30,
+              name: '阿迪达斯三叶草asdasdafadsa',
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/4.jpg'),
+              price: 20,
+              originalPrice: 30,
+              name: '阿迪达斯三叶草asdasdafadsa',
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/5.jpg'),
+              price: 20,
+              originalPrice: 30,
+              name: '阿迪达斯三叶草asdasdafadsa',
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/1.jpg'),
+              price: 20,
+              originalPrice: 30,
+              name: '阿迪达斯三叶草asdasdafadsa',
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/2.jpg'),
+              price: 20,
+              originalPrice: 30,
+              name: '阿迪达斯三叶草asdasdafadsa',
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/3.jpg'),
+              price: 20,
+              originalPrice: 30,
+              name: '阿迪达斯三叶草asdasdafadsa',
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/4.jpg'),
+              price: 20,
+              originalPrice: 30,
+              name: '阿迪达斯三叶草asdasdafadsa',
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/5.jpg'),
+              price: 20,
+              originalPrice: 30,
+              name: '阿迪达斯三叶草asdasdafadsa',
+              url: ''
+            },
+          ]
+        },
+        {
+          time: 8,
+          goodsList: [{
+              img: require('@/assets/nav/1.jpg'),
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/2.jpg'),
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/3.jpg'),
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/4.jpg'),
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/5.jpg'),
+              url: ''
+            },
+          ]
+        },
+        {
+          time: 10,
+          goodsList: [{
+              img: require('@/assets/nav/1.jpg'),
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/2.jpg'),
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/3.jpg'),
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/4.jpg'),
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/5.jpg'),
+              url: ''
+            },
+          ]
+        },
+        {
+          time: 12,
+          goodsList: [{
+              img: require('@/assets/nav/1.jpg'),
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/2.jpg'),
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/3.jpg'),
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/4.jpg'),
+              url: ''
+            },
+            {
+              img: require('@/assets/nav/5.jpg'),
+              url: ''
+            },
+          ]
+        },
+        {
+          time: 14,
+          goodsList: []
+        },
+        {
+          time: 16,
+          goodsList: []
+        },
+        {
+          time: 18,
+          goodsList: []
+        }
+
+      ]
+    },
+  },
+  {
+    type: 'discountAdvert',
+    name: '折扣广告',
+    icon: 'md-image',
+    options: {
+      bgImg: {
+        img: require('@/assets/nav/decorate.png'),
+        url: '',
+        size: "1300*586"
+      },
+      classification: [{
+        img: require('@/assets/nav/decorate2.jpeg'),
+        url: '',
+        size: '190*210'
+      }, {
+        img: require('@/assets/nav/decorate2.jpeg'),
+        url: '',
+        size: '190*210'
+      }, {
+        img: require('@/assets/nav/decorate2.jpeg'),
+        url: '',
+        size: '190*210'
+      }, {
+        img: require('@/assets/nav/decorate2.jpeg'),
+        url: '',
+        size: '190*210'
+      }, {
+        img: require('@/assets/nav/decorate2.jpeg'),
+        url: '',
+        size: '190*210'
+      }, {
+        img: require('@/assets/nav/decorate2.jpeg'),
+        url: '',
+        size: '190*210'
+      }, {
+        img: require('@/assets/nav/decorate2.jpeg'),
+        url: '',
+        size: '190*210'
+      }, {
+        img: require('@/assets/nav/decorate2.jpeg'),
+        url: '',
+        size: '190*210'
+      }, {
+        img: require('@/assets/nav/decorate2.jpeg'),
+        url: '',
+        size: '190*210'
+      }, {
+        img: require('@/assets/nav/decorate2.jpeg'),
+        url: '',
+        size: '190*210'
+      }, ],
+      brandList: [{
+        img: require('@/assets/nav/decorate11.jpeg'),
+        url: '',
+        size: '240*105'
+      }, {
+        img: require('@/assets/nav/decorate11.jpeg'),
+        url: '',
+        size: '240*105'
+      }, {
+        img: require('@/assets/nav/decorate11.jpeg'),
+        url: '',
+        size: '240*105'
+      }, {
+        img: require('@/assets/nav/decorate11.jpeg'),
+        url: '',
+        size: '240*105'
+      }, ]
+    },
+  },
+  {
+    type: 'recommend',
+    name: '好货推荐',
+    icon: 'md-image',
+    options: {
+      contentLeft: {
+        title: '发现好货',
+        secondTitle: '更多好货',
+        bgColor: '#449dae',
+        url: '',
+        list: [{
+            img: require('@/assets/nav/decorate3.jpeg'),
+            name: '阿迪达斯三叶草',
+            describe: '也许是每一款经典系列都应该有一个独特的故事吧',
+            url: '',
+            size: '160*160'
+          },
+          {
+            img: require('@/assets/nav/decorate4.jpeg'),
+            name: '360行车记录',
+            describe: '夜行 监控 电子狗 蓝牙',
+            url: '',
+            size: '80*80'
+          },
+          {
+            img: require('@/assets/nav/decorate4.jpeg'),
+            name: '360行车记录',
+            describe: '夜行 监控 电子狗 蓝牙',
+            url: '',
+            size: '80*80'
+          },
+          {
+            img: require('@/assets/nav/decorate4.jpeg'),
+            name: '360行车记录',
+            describe: '夜行 监控 电子狗 蓝牙',
+            url: '',
+            size: '80*80'
+          },
+          {
+            img: require('@/assets/nav/decorate4.jpeg'),
+            name: '360行车记录',
+            describe: '夜行 监控 电子狗 蓝牙',
+            url: '',
+            size: '80*80'
+          },
+          {
+            img: require('@/assets/nav/decorate4.jpeg'),
+            name: '360行车记录',
+            describe: '夜行 监控 电子狗 蓝牙',
+            url: '',
+            size: '80*80'
+          },
+          {
+            img: require('@/assets/nav/decorate4.jpeg'),
+            name: '360行车记录',
+            describe: '夜行 监控 电子狗 蓝牙',
+            url: '',
+            size: '80*80'
+          },
+        ]
+      },
+      contentRight: {
+        title: '特色推荐',
+        secondTitle: '更多特色推荐',
+        bgColor: '#a25684',
+        url: '',
+        list: [{
+            img: require('@/assets/nav/decorate5.jpeg'),
+            name: '好心情喝出来',
+            describe: '遇见懂你的饮品',
+            url: '',
+            size: '100*100'
+          },
+          {
+            img: require('@/assets/nav/decorate5.jpeg'),
+            name: '好心情喝出来',
+            describe: '遇见懂你的饮品',
+            url: '',
+            size: '100*100'
+          },
+          {
+            img: require('@/assets/nav/decorate5.jpeg'),
+            name: '好心情喝出来',
+            describe: '遇见懂你的饮品',
+            url: '',
+            size: '100*100'
+          },
+          {
+            img: require('@/assets/nav/decorate5.jpeg'),
+            name: '好心情喝出来',
+            describe: '遇见懂你的饮品',
+            url: '',
+            size: '100*100'
+          },
+        ]
+      }
+    },
+  },
+  {
+    type: 'newGoodsSort',
+    name: '新品排行',
+    icon: 'md-image',
+    options: {
+      left: {
+        title: '特卖',
+        secondTitle: "更多特卖",
+        bgColor: '#c43d7e',
+        url: '',
+        list: [{
+            name: '新年心愿单',
+            describe: '满269减50,满999减100',
+            img: require('@/assets/nav/decorate6.jpeg'),
+            url: '',
+            size: "160*160"
+          },
+          {
+            name: 'Ms.Maggie 冬季时尚',
+            describe: '满269减50',
+            img: require('@/assets/nav/decorate6.jpeg'),
+            url: '',
+            size: "90*90"
+          },
+          {
+            name: 'Ms.Maggie 冬季时尚',
+            describe: '满269减50',
+            img: require('@/assets/nav/decorate6.jpeg'),
+            url: '',
+            size: "90*90"
+          },
+          {
+            name: 'Ms.Maggie 冬季时尚',
+            describe: '满269减50',
+            img: require('@/assets/nav/decorate6.jpeg'),
+            url: '',
+            size: "90*90"
+          },
+          {
+            name: '阿迪达斯 领跑时尚',
+            describe: '满269减50',
+            img: require('@/assets/nav/decorate6.jpeg'),
+            url: '',
+            size: "90*90"
+          },
+        ],
+      },
+      middle: {
+        title: '新品',
+        secondTitle: "更多新品",
+        bgColor: '#e66a07',
+        url: '',
+        list: [{
+            name: '阿迪达斯 领跑时尚',
+            describe: '满269减50',
+            img: require('@/assets/nav/decorate6.jpeg'),
+            url: '',
+            size: "90*90"
+          },
+          {
+            name: '阿迪达斯 领跑时尚',
+            describe: '满269减50',
+            img: require('@/assets/nav/decorate6.jpeg'),
+            url: '',
+            size: "90*90"
+          },
+          {
+            name: '阿迪达斯 领跑时尚',
+            describe: '满269减50',
+            img: require('@/assets/nav/decorate6.jpeg'),
+            url: '',
+            size: "90*90"
+          },
+          {
+            name: '阿迪达斯 领跑时尚',
+            describe: '满269减50',
+            img: require('@/assets/nav/decorate6.jpeg'),
+            url: '',
+            size: "90*90"
+          },
+          {
+            name: '阿迪达斯 领跑时尚',
+            describe: '满269减50',
+            img: require('@/assets/nav/decorate6.jpeg'),
+            url: '',
+            size: "90*90"
+          },
+          {
+            name: '阿迪达斯 领跑时尚',
+            describe: '满269减50',
+            img: require('@/assets/nav/decorate6.jpeg'),
+            url: '',
+            size: "90*90"
+          },
+        ]
+      },
+      right: {
+        title: '排行榜',
+        secondTitle: "精品风向标",
+        bgColor: '#b62323',
+        url: '',
+        list: [{
+            name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
+            price: 14.9,
+            img: require('@/assets/nav/decorate7.jpeg'),
+            url: ''
+          },
+          {
+            name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
+            price: 14.9,
+            img: require('@/assets/nav/decorate7.jpeg'),
+            url: ''
+          },
+          {
+            name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
+            price: 14.9,
+            img: require('@/assets/nav/decorate7.jpeg'),
+            url: ''
+          },
+          {
+            name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
+            price: 14.9,
+            img: require('@/assets/nav/decorate7.jpeg'),
+            url: ''
+          },
+          {
+            name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
+            price: 14.9,
+            img: require('@/assets/nav/decorate7.jpeg'),
+            url: ''
+          },
+          {
+            name: '小米红米3s手机壳保护套红米3高配版指纹男女款潮版磨砂硬壳防摔 收藏截图 送大礼包',
+            price: 14.9,
+            img: require('@/assets/nav/decorate7.jpeg'),
+            url: ''
+          },
+        ]
+      }
+    },
+  },
+  {
+    type: 'firstAdvert',
+    name: '首页广告',
+    icon: 'md-image',
+    options: {
+      list: [{
+          name: '生鲜',
+          describe: "年货带回家 满199减60",
+          img: require('@/assets/nav/decorate8.png'),
+          url: '',
+          fromColor: '#e89621',
+          toColor: "#f5c568",
+          size: '170*170'
+        },
+        {
+          name: '众筹',
+          describe: "年货带回家",
+          img: require('@/assets/nav/decorate9.png'),
+          url: '',
+          fromColor: "#325bb4",
+          toColor: '#4c9afe',
+          size: '170*170'
+        },
+        {
+          name: '生鲜',
+          describe: "年货带回家 满199减60",
+          img: require('@/assets/nav/decorate8.png'),
+          url: '',
+          fromColor: "#1c9daf",
+          toColor: '#40cda7',
+          size: '170*170'
+        },
+        {
+          name: '众筹',
+          describe: "备孕有孕检测仪",
+          img: require('@/assets/nav/decorate9.png'),
+          url: '',
+          fromColor: "#d13837",
+          toColor: '#df6d4f',
+          size: '170*170'
+        },
+        {
+          name: '生鲜',
+          describe: "年货带回家 满199减60",
+          img: require('@/assets/nav/decorate8.png'),
+          url: '',
+          fromColor: "#ca4283",
+          toColor: '#eb75cf',
+          size: '170*170'
+        },
+        {
+          name: '众筹',
+          describe: "备孕有孕检测仪",
+          img: require('@/assets/nav/decorate9.png'),
+          url: '',
+          fromColor: "#5d40c1",
+          toColor: '#8c5fdb',
+          size: '170*170'
+        },
+      ],
+    },
+  },
+  {
+    type: 'bannerAdvert',
+    name: '横幅广告',
+    icon: 'md-image',
+    options: {
+      img: '',
+      url: '',
+      size: '1200*自定义'
+    },
+  },
+  {
+    type: 'notEnough',
+    name: '还没逛够',
+    icon: 'md-image',
+    options: {
+      list: [
+        [{
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+        ],
+        [{
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+        ],
+        [{
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+        ],
+        [{
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+          {
+            img: require('@/assets/nav/decorate10.jpeg'),
+            name: 'Apple/苹果 13 英寸：MacBook Pro Multi-Touch Bar 和 Touch ID 2.9GHz 处理器 512GB 存储容量',
+            price: 6666,
+            url: ''
+          },
+        ],
+
+      ],
+      navList: [{
+          title: '精选',
+          desc: '猜你喜欢'
+        },
+        {
+          title: '智能先锋',
+          desc: '大电器城'
+        },
+        {
+          title: '居家优品',
+          desc: '品质生活'
+        },
+        {
+          title: '超市百货',
+          desc: '百货生鲜'
+        },
+      ]
+    },
+  },
+]
diff --git a/seller/src/views/shop/modelForm.vue b/seller/src/views/shop/modelForm.vue
new file mode 100644
index 00000000..fcc67baf
--- /dev/null
+++ b/seller/src/views/shop/modelForm.vue
@@ -0,0 +1,385 @@
+<template>
+    <div class="model-form">
+        <div class="model-content">
+            <!-- 头部广告，登录信息，不需要拖拽 -->
+            <div class="top-fixed-advert" :style="{backgroundColor:topAdvert.bgColor}">
+                <img :src="topAdvert.img" width="1200" height="80" alt="">
+                <div class="setup-box">
+                    <Button size="small" @click.stop="handleModel('topAdvert')">编辑</Button>
+                </div>
+            </div>
+            <div class="header-con">
+                <div></div>
+                <ul class="detail">
+                    <li>立即注册</li>
+                    <li>请登录</li>
+                    <li>我的订单</li>
+                    <li>我的足迹</li>
+                    <li><Icon size="18" type="ios-cart-outline" ></Icon>购物车</li>
+                    <li>店铺入驻</li>
+                </ul>
+            </div>
+            <div class="search-con">
+                <img :src="require('@/assets/logo.png')" class="logo" alt="">
+                <div class="search">
+                    <i-input  size="large" placeholder="输入你想查找的商品">
+                        <Button slot="append">搜索</Button>
+                    </i-input>
+                </div>
+            </div>
+            <!-- <div class="nav-con">
+                <div class="all-categories">全部商品分类</div>
+                <ul class="nav-item">
+                    <li v-for="(item,index) in navList.list" :key="index">
+                        <a href="#">{{item.name}}</a>
+                    </li>
+                </ul>
+                <div class="setup-box">
+                    <Button size="small" @click.stop="handleModel('quickNav')">编辑</Button>
+                </div>
+            </div> -->
+            <!-- 装修主体 -->
+            <div>
+                <draggable class="model-form-list"
+                    v-model="data.list"
+                    v-bind="{group:'model', ghostClass: 'ghost'}"
+                    @end="handleMoveEnd"
+                    @add="handleModelAdd"
+                >
+                    <template v-for="(element, index) in data.list">
+                        <model-form-item v-if="element && element.key" :key="element.key" :element="element" :index="index" :data="data"></model-form-item>
+                    </template>
+                </draggable>
+            </div>
+        </div>
+        <Modal
+            v-model="showModal"
+            title="顶部广告"
+            draggable
+            width="800"
+            :z-index="100"
+            :mask-closable="false"
+
+
+            >
+            <!-- 顶部广告 -->
+            <div class="modal-top-advert">
+                <div>
+                    <img class="show-image" width="600" height="40" :src="topAdvert.img" alt />
+                </div>
+                <div class="tips">
+                    建议尺寸：<span>{{ topAdvert.size }}</span>
+                </div>
+                <div>
+                    图片链接：<span>{{ topAdvert.url }}</span><Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
+                </div>
+                <div>
+                    选择图片：<Button size="small" type="primary" @click="handleSelectImg">选择图片</Button>&nbsp;
+                </div>
+                <div>
+                    选择背景色：<ColorPicker v-model="topAdvert.bgColor" />
+                </div>
+            </div>
+        </Modal>
+        <Modal
+            v-model="showModalNav"
+            title="快捷导航"
+            draggable
+            width="800"
+            :z-index="100"
+            :mask-closable="false"
+            >
+            <!-- 分类tab栏 -->
+            <div class="modal-tab-bar">
+                <Button type="primary" size='small' @click="handleAddNav">添加分类</Button>
+                <table cellspacing="0">
+                    <thead>
+                        <tr>
+                            <th width="250">分类名称</th>
+                            <th width="250">链接地址</th>
+                            <!-- <th width="150">排序</th> -->
+                            <th width="250">操作</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(item, index) in navList.list" :key="index">
+                            <td><Input v-model="item.name" /></td>
+                            <td><Input v-model="item.url" disabled /></td>
+                            <!-- <td><Input v-model="item.sort"/></td> -->
+                            <td>
+                                <Button type="primary" size="small" @click="handleSelectLink(item,index)">选择链接</Button>&nbsp;
+                                <Button type="error" size="small" @click="handleDelNav(index)">删除</Button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </Modal>
+        <!-- 选择商品。链接 -->
+        <liliDialog
+            ref="liliDialog"
+            @selectedLink="selectedLink"
+
+        ></liliDialog>
+        <!-- 选择图片 -->
+        <Modal width="1200px" v-model="picModelFlag" footer-hide>
+            <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
+        </Modal>
+    </div>
+</template>
+<script>
+import Draggable from 'vuedraggable'
+import ModelFormItem from './modelFormItem.vue'
+import ossManage from "@/views/sys/oss-manage/ossManage";
+export default {
+    name:'modelForm',
+    components:{
+        Draggable,
+        ModelFormItem,
+        ossManage
+    },
+    props:['data'],
+    data(){
+        return{
+            picModelFlag: false, // 选择图片模态框
+            showModal: false, // 顶部广告模态框
+            showModalNav: false, // 分类nav模态框
+            selectedNav:null, //当前已选nav
+            // 模拟搜索框下方数据
+            promotionTags: [ "买2免1", "领200神券", "199减100", "母婴5折抢", "充100送20"], // 热词数据
+            topAdvert:{ // 头部广告图数据
+                type:'topAdvert',
+                img:'',
+                url:'',
+                bgColor:'#de000d',
+                size:'1200*80'
+            },
+            navList:{ // 分类nav数据
+                type:'navBar',
+                list:[
+                    {name:'秒杀', url:''}, {name:'闪购', url:''}, {name:'优惠券', url:''}, {name:'拍卖', url:''}, {name:'服装城', url:''},
+                ]
+            }
+        }
+    },
+    mounted(){
+        document.body.ondrop = function (event) {
+            let isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
+            if (isFirefox) {
+                event.preventDefault()
+                event.stopPropagation()
+            }
+        }
+    },
+    methods:{
+        handleSelectLink(item,index) { // 调起选择链接弹窗
+            if(item) this.selectedNav = item;
+            this.$refs.liliDialog.open('link')
+        },
+        // 已选链接
+        selectedLink(val) {
+            console.log(val);
+            if(this.showModalNav){
+                this.selectedNav.url = this.$options.filters.formatLinkType(val);
+            }else {
+                this.topAdvert.url = this.$options.filters.formatLinkType(val);
+            }
+        },
+        handleDelNav(index){ // 删除导航
+            this.navList.list.splice(index,1)
+        },
+        handleAddNav(){ // 添加导航
+            this.navList.list.push(
+                {name:'',url:''}
+            )
+            console.log(this.navList.list)
+        },
+        // 拖动结束回调
+        handleMoveEnd ({newIndex, oldIndex}) {
+            console.log('index', newIndex, oldIndex)
+        },
+        // 修改顶部广告
+        handleModel (type) {
+            if(type == 'topAdvert'){
+                this.showModal = true;
+            } else {
+                this.showModalNav = true;
+            }
+        },
+        // 选择图片
+        handleSelectImg() {
+            this.$refs.ossManage.selectImage = true;
+            this.picModelFlag = true;
+        },
+        callbackSelected (item) { // 选择图片回调
+            this.picModelFlag = false;
+            this.topAdvert.img = item.url;
+        },
+        handleModelAdd (evt) { // 拖拽，添加模块
+            const newIndex = evt.newIndex
+
+            // 为拖拽到容器的元素添加唯一 key
+            this.data.list[newIndex] = JSON.parse(JSON.stringify(this.data.list[newIndex]))
+            const key = Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
+            this.$set(this.data.list, newIndex, {
+                ...this.data.list[newIndex],
+                options: {
+                    ...this.data.list[newIndex].options,
+                },
+                key,
+                // 绑定键值
+                model: this.data.list[newIndex].type + '_' + key
+            })
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+    @import './modelList/setup-box.scss';
+    .model-form {
+        width: 1500px;
+    }
+    .model-content {
+        width: 1200px;
+        margin: 0 auto;
+        background: #fff;
+        min-height: 1200px;
+    }
+    .model-form-list{
+        min-height: 500px;
+    }
+    /**  顶部广告，头部，搜索框 start */
+    .top-fixed-advert{
+        display: flex;
+        width:1500px;
+        margin-left: -150px;
+        background: $theme_color;
+        justify-content: center;
+    }
+
+    .header-con {
+        display: flex;
+        justify-content: space-between;
+        height: 35px;
+        padding: 0 15px;
+        line-height: 35px;
+        color: #999;
+        font-weight: bold;
+        div,li{
+            &:hover{
+                color: $theme_color;
+                cursor: pointer;
+            }
+        }
+        .detail{
+            display: flex;
+            >li{
+                margin-left: 10px;
+                &::after{
+                    content: "|";
+                    padding-left: 10px;
+                }
+                &:last-child::after{
+                    content:'';
+                    padding-left: 0;
+                }
+                &:hover::after{
+                    color: #999;
+                }
+            }
+        }
+    }
+    /** 搜索框 */
+    .search-con {
+        padding-top: 15px;
+        margin: 0px auto;
+        margin-bottom: 10px;
+        width: 1200px;
+        position: relative;
+        .logo{
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            width: 150px;
+            height: 50px;
+        }
+        .search {
+            width: 460px;
+            margin: 0 auto;
+            /deep/ .ivu-input.ivu-input-large {
+                border: 2px solid $theme_color;
+                font-size: 12px;
+                height: 34px;
+                &:focus {
+                    box-shadow: none;
+                }
+            }
+            /deep/ .ivu-input-group-append {
+                border: 1px solid $theme_color;
+                border-left: none;
+                height: 30px;
+                background-color: $theme_color;
+                color: #ffffff;
+                button {
+                    font-size: 14px;
+                    font-weight: 600;
+                    line-height: 1;
+                }
+            }
+        }
+    }
+    /** 商品分类 */
+    .nav-con{
+       width:1200px;
+       height: 40px;
+       background: #eee;
+       display: flex;
+       .all-categories{
+           width: 200px;
+           line-height: 40px;
+           color: #fff;
+           background-color: $theme_color;
+           text-align: center;
+           font-size: 16px;
+       }
+       .nav-item {
+            width: 1000px;
+            height: 40px;
+            line-height: 40px;
+            overflow: hidden;
+            list-style: none;
+            background-color: #eee;
+            display: flex;
+            li{
+                font-size: 16px;
+                font-weight: bold;
+                margin-left: 20px;
+                a{
+                    color:rgb(89, 88, 88);
+                    font-size: 15px;
+                    &:hover{color:$theme_color}
+                }
+            }
+        }
+    }
+    /**  顶部广告，头部，搜索框 end */
+
+    .top-fixed-advert, .nav-con{
+        position: relative;
+        &:hover{
+            .setup-box{
+                display: block;
+            }
+        }
+    }
+    /** 装修模态框 内部样式start */
+    .modal-top-advert{
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        >*{
+            margin-bottom: 10px;
+        }
+    }
+</style>
diff --git a/seller/src/views/shop/modelFormItem.vue b/seller/src/views/shop/modelFormItem.vue
new file mode 100644
index 00000000..b87d747f
--- /dev/null
+++ b/seller/src/views/shop/modelFormItem.vue
@@ -0,0 +1,491 @@
+<template>
+  <div class="model-item" v-if="element && element.key">
+    <!-- 轮播图模块，包括个人信息，快捷导航模块 -->
+    <template v-if="element.type == 'carousel'">
+      <model-carousel :data="element"></model-carousel>
+    </template>
+    <!-- 轮播图模块，100%宽度，无个人信息栏 -->
+    <template v-if="element.type == 'carousel1'">
+      <model-carousel1 class="mb_20" :data="element"></model-carousel1>
+    </template>
+    <!-- 轮播图模块，包括个人信息，两个轮播模块 -->
+    <template v-if="element.type == 'carousel2'">
+      <model-carousel2 class="mb_20" :data="element"></model-carousel2>
+    </template>
+    <!-- 热门广告 -->
+    <template v-if="element.type == 'hotAdvert'">
+      <div class="setup-content">
+        <img
+          style="display: block"
+          :src="element.options.list[0].img"
+          @click="$router.push(element.options.list[0].url)"
+          width="1200"
+          alt=""
+        />
+        <div class="setup-box">
+          <div>
+            <Button
+              size="small"
+              @click.stop="handleSelectModel(element.options.list[0])"
+              >编辑</Button
+            >
+          </div>
+        </div>
+      </div>
+      <ul class="advert-list">
+        <template v-for="(item, index) in element.options.list">
+          <li
+            v-if="index !== 0"
+            @click="$router.push(item.url)"
+            class="setup-content"
+            :key="index"
+          >
+            <img :src="item.img" width="230" height="190" alt="" />
+            <div class="setup-box">
+              <div>
+                <Button size="small" @click.stop="handleSelectModel(item)"
+                  >编辑</Button
+                >
+              </div>
+            </div>
+          </li>
+        </template>
+      </ul>
+    </template>
+    <!-- 限时秒杀 待完善 -->
+    <template v-if="element.type == 'seckill'">
+      <seckill :data="element"></seckill>
+    </template>
+    <!-- 折扣广告 -->
+    <template v-if="element.type == 'discountAdvert'">
+      <div
+        class="discountAdvert"
+        :style="{
+          'background-image':
+            'url(' + require('@/assets/nav/decorate.png') + ')',
+        }"
+      >
+        <div>
+          <div
+            v-for="(item, index) in element.options.classification"
+            :key="index"
+            class="setup-content"
+          >
+            <img :src="item.img" width="190" height="210" alt="" />
+            <div class="setup-box">
+              <div>
+                <Button size="small" @click.stop="handleSelectModel(item)"
+                  >编辑</Button
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            v-for="(item, index) in element.options.brandList"
+            :key="index"
+            class="setup-content"
+          >
+            <img :src="item.img" width="240" height="105" alt="" />
+            <div class="setup-box">
+              <div>
+                <Button size="small" @click.stop="handleSelectModel(item)"
+                  >编辑</Button
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <!-- 好货推荐 -->
+    <template v-if="element.type == 'recommend'">
+      <recommend :data="element"></recommend>
+    </template>
+    <!-- 新品排行 -->
+    <template v-if="element.type == 'newGoodsSort'">
+      <new-goods-sort :data="element"></new-goods-sort>
+    </template>
+    <!-- 首页广告 -->
+    <template v-if="element.type == 'firstAdvert'">
+      <first-page-advert :data="element"></first-page-advert>
+    </template>
+    <!-- 横幅广告 -->
+    <template v-if="element.type == 'bannerAdvert'">
+      <div class="horizontal-advert setup-content">
+        <img
+          v-if="element.options.img"
+          width="1200"
+          :src="element.options.img"
+          alt=""
+        />
+        <div v-else class="default-con">
+          <p>广告图片</p>
+          <p>1200*自定义</p>
+        </div>
+        <div class="setup-box">
+          <div>
+            <Button
+              size="small"
+              @click.stop="handleSelectModel(element.options)"
+              >编辑</Button
+            >
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-if="element.type == 'notEnough'">
+      <not-enough :data="element"></not-enough>
+    </template>
+    <div class="del-btn">
+      <Button size="small" type="error" @click="handleModelDelete">删除</Button>
+    </div>
+    <Modal
+      v-model="showModal"
+      title="装修"
+      draggable
+      width="800"
+      :z-index="100"
+      :mask-closable="false"
+    >
+      <div class="modal-top-advert">
+        <div>
+          <!-- 热门广告两种图片尺寸 -->
+          <img
+            class="show-image"
+            width="600"
+            height="40"
+            v-if="selected.size && selected.size.indexOf('1200') >= 0"
+            :src="selected.img"
+            alt
+          />
+          <img
+            class="show-image"
+            width="230"
+            height="190"
+            v-if="selected.size && selected.size.indexOf('230*190') >= 0"
+            :src="selected.img"
+            alt
+          />
+          <!-- 折扣广告三种图片尺寸 -->
+          <img
+            class="show-image"
+            width="600"
+            height="300"
+            v-if="selected.size && selected.size.indexOf('1300') >= 0"
+            :src="selected.img"
+            alt
+          />
+          <img
+            class="show-image"
+            width="190"
+            height="210"
+            v-if="selected.size && selected.size.indexOf('190*210') >= 0"
+            :src="selected.img"
+            alt
+          />
+          <img
+            class="show-image"
+            width="240"
+            height="105"
+            v-if="selected.size && selected.size.indexOf('240*105') >= 0"
+            :src="selected.img"
+            alt
+          />
+        </div>
+        <div class="tips">
+          建议尺寸：<span>{{ selected.size }}</span>
+        </div>
+        <div>
+          图片链接：<span>{{ selected.url }}</span>
+          <Button size="small" type="primary" @click="handleSelectLink"
+            >选择链接</Button
+          >
+        </div>
+        <div>
+          选择图片：<Button size="small" type="primary" @click="handleSelectImg"
+            >选择图片</Button
+          >&nbsp;
+        </div>
+      </div>
+    </Modal>
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+  
+    ></liliDialog>
+    <!-- 选择图片 -->
+    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+      <ossManage
+        @callback="callbackSelected"
+        :isComponent="true"
+        ref="ossManage"
+      />
+    </Modal>
+  </div>
+</template>
+
+<script>
+import ModelCarousel from "./modelList/carousel.vue";
+import ModelCarousel1 from './modelList/carousel1.vue';
+import ModelCarousel2 from './modelList/carousel2.vue';
+import FirstPageAdvert from "./modelList/firstPageAdvert.vue";
+import NewGoodsSort from "./modelList/newGoodsSort.vue";
+import Recommend from "./modelList/recommend.vue";
+import NotEnough from "./modelList/notEnough.vue";
+import Seckill from "./modelList/seckill.vue";
+import ossManage from "@/views/sys/oss-manage/ossManage";
+
+export default {
+  name: "modelFormItem",
+  props: ["element", "select", "index", "data"],
+  components: {
+    ModelCarousel,
+    ModelCarousel1,
+    ModelCarousel2,
+    Recommend,
+    NewGoodsSort,
+    FirstPageAdvert,
+    NotEnough,
+    Seckill,
+    ossManage,
+  },
+  data() {
+    return {
+      showModal: false, // modal显隐
+      selected: {}, // 已选数据
+      picModelFlag: false, // 图片选择器
+    };
+  },
+  methods: {
+    // 编辑模块
+    handleSelectModel(item) {
+      this.selected = item;
+      this.showModal = true;
+    },
+    // 删除模块
+    handleModelDelete() {
+      this.$Modal.confirm({
+        title: "提示",
+        content: "<p>确定删除当前模块吗？</p>",
+        onOk: () => {
+          this.$nextTick(() => {
+            this.data.list.splice(this.index, 1);
+          });
+        },
+      });
+    },
+    handleSelectLink(item, index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+    },
+    // 确定选择链接
+    selectedLink(val) {
+      this.selected.url = this.$options.filters.formatLinkType(val);
+    },
+    
+    handleSelectImg() {
+      // 选择图片
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
+    // 回显图片
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.selected.img = val.url;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "./modelList/setup-box.scss";
+.model-item {
+  position: relative;
+  margin-bottom: 20px;
+  &:hover {
+    .del-btn {
+      display: block;
+    }
+  }
+}
+.del-btn {
+  width: 100px;
+  height: 100px;
+  display: none;
+  position: absolute;
+  right: -100px;
+  top: 0;
+  &:hover {
+    display: block;
+  }
+}
+/** 横幅广告 */
+.horizontal-advert {
+  width: 1200px;
+  height: auto;
+  .default-con {
+    height: 100px;
+    padding-top: 30px;
+    text-align: center;
+    background: #ddd;
+  }
+}
+/** 热门广告 */
+.advert-list {
+  background: $theme_color;
+  height: 200px;
+  display: flex;
+  justify-content: space-around;
+  padding: 3px 10px;
+  > li {
+    img {
+      cursor: pointer;
+      border-radius: 10px;
+      transition: all 150ms ease-in-out;
+      &:hover {
+        transform: translateY(-3px);
+        box-shadow: rgba(0, 0, 0, 0.4) 0px 5px 20px 0px;
+      }
+    }
+  }
+}
+/** 限时秒杀 */
+.limit-img {
+  display: flex;
+  flex-direction: row;
+  img {
+    width: 300px;
+    height: 100px;
+  }
+}
+/** 折扣广告 */
+.discountAdvert {
+  height: 566px;
+  background-repeat: no-repeat;
+  margin-left: -97px;
+  position: relative;
+  > div {
+    padding-left: 295px;
+    display: flex;
+    flex-wrap: wrap;
+    &:nth-child(1) img {
+      margin: 10px 10px 0 0;
+    }
+    &:nth-child(2) img {
+      margin: 0 10px 0 0;
+    }
+  }
+}
+/** 首页品牌 */
+.brand {
+  .brand-view {
+    display: flex;
+    margin-top: 10px;
+    .brand-view-content {
+      width: 470px;
+      margin-left: 10px;
+      img {
+        width: 100%;
+        height: 316px;
+      }
+      .brand-view-title {
+        height: 50px;
+        padding: 0 5px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+    }
+    .brand-view-content:first-child {
+      width: 240px;
+      margin-left: 0;
+    }
+  }
+  .brand-list {
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    li {
+      width: 121px;
+      height: 112px;
+      position: relative;
+      overflow: hidden;
+      border: 1px solid #f5f5f5;
+      margin: -1px -1px 0 0;
+      &:hover {
+        .brand-mash {
+          display: flex;
+        }
+      }
+      .brand-img {
+        text-align: center;
+        margin-top: 30px;
+        img {
+          width: 100px;
+          height: auto;
+        }
+      }
+      .brand-mash {
+        display: none;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background: rgba(0, 0, 0, 0.5);
+        width: inherit;
+        height: inherit;
+        font-size: 12px;
+        font-weight: bold;
+        .ivu-icon {
+          position: absolute;
+          right: 10px;
+          top: 10px;
+          font-size: 15px;
+        }
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        color: #fff;
+        cursor: pointer;
+        div:last-child {
+          background-color: $theme_color;
+          border-radius: 9px;
+          padding: 0 10px;
+          margin-top: 5px;
+        }
+      }
+    }
+    .refresh {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+      .ivu-icon {
+        font-size: 18px;
+        transition: all 0.3s ease-out;
+      }
+      &:hover {
+        background-color: $theme_color;
+        color: #fff;
+        .ivu-icon {
+          transform: rotateZ(360deg);
+        }
+      }
+    }
+  }
+}
+
+/** 装修模态框 内部样式start */
+.modal-top-advert {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  > * {
+    margin-bottom: 10px;
+  }
+}
+</style>
+
diff --git a/seller/src/views/shop/modelList/carousel.vue b/seller/src/views/shop/modelList/carousel.vue
new file mode 100644
index 00000000..cede534d
--- /dev/null
+++ b/seller/src/views/shop/modelList/carousel.vue
@@ -0,0 +1,290 @@
+<template>
+  <div class="model-carousel">
+    <div class="nav-body clearfix">
+      <!-- 侧边导航 -->
+      <div class="nav-side">分类占位区</div>
+      <div class="nav-content setup-content">
+        <!-- 轮播图 -->
+        <Carousel autoplay>
+          <CarouselItem v-for="(item, index) in data.options.list" :key="index">
+            <div style="overflow: hidden">
+              <img :src="item.img" width="790" height="340" />
+            </div>
+          </CarouselItem>
+        </Carousel>
+        <div class="setup-box">
+          <div>
+            <Button size="small" @click.stop="handleSelectModel">编辑</Button>
+          </div>
+        </div>
+      </div>
+      <div class="nav-right">
+        <div class="person-msg">
+          <img :src="userInfo.face" v-if="userInfo.face" alt />
+          <Avatar icon="ios-person" class="mb_10" v-else size="80" />
+          <div>Hi，{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}</div>
+          <div v-if="userInfo.id">
+            <Button type="error" shape="circle">会员中心</Button>
+          </div>
+          <div v-else>
+            <Button type="error" shape="circle">请登录</Button>
+          </div>
+        </div>
+        <div class="shop-msg">
+          <div>
+            <span>常见问题</span>
+            <ul class="article-list">
+              <li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
+                {{article.title}}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Modal
+      v-model="showModal"
+      title="快捷导航"
+      draggable
+      width="800"
+      :z-index="100"
+      :mask-closable="false"
+      
+      
+    >
+      <div class="modal-tab-bar">
+        <Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
+        &nbsp;
+        <span class="ml_10">图片尺寸:{{ data.size }}</span>
+        <div style="color: #999" class="fz_12">点击缩略图替换图片</div>
+        <table cellspacing="0">
+          <thead>
+            <tr>
+              <th width="250">所选图片</th>
+              <th width="250">链接地址</th>
+              <!-- <th width="150">排序</th> -->
+              <th width="250">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in data.options.list" :key="index">
+              <td>
+                <img
+                  style="cursor: pointer"
+                  :src="item.img"
+                  @click="handleSelectImg(item)"
+                  width="200"
+                  height="100"
+                  alt=""
+                />
+              </td>
+              <td><Input v-model="item.url" disabled /></td>
+              <!-- <td><Input v-model="item.sort"/></td> -->
+              <td>
+                <Button
+                    type="primary"
+                    size="small"
+                    @click="handleSelectImg(item)"
+                    >选择图片</Button
+                >&nbsp;
+                <Button
+                  type="info"
+                  size="small"
+                  @click="handleSelectLink(item)"
+                  >选择链接</Button
+                >&nbsp;
+                <Button
+                  type="error"
+                  ghost
+                  size="small"
+                  @click="handleDel(index)"
+                  >删除</Button
+                >
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Modal>
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+    
+    ></liliDialog>
+    <!-- 选择图片 -->
+    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+      <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
+    </Modal>
+  </div>
+</template>
+
+<script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+export default {
+  name: "modelCarousel",
+  props: ["data"],
+  components: {
+    ossManage
+  },
+  data() {
+    return {
+      showModal: false, // modal显隐
+      selected: null, // 已选数据
+      picModelFlag: false, // 选择图片modal
+      userInfo:{},
+      articleList:[
+        {title:'促销计算规则'},
+        {title:'商家申请开店'},
+        {title:'商家账号注册'},
+        {title:'促销计算规则'}
+      ]
+    };
+  },
+
+  methods: {
+    handleSelectModel () {
+      // 编辑模块
+      this.showModal = true;
+    },
+    // 添加轮播图
+    handleAdd () {
+      this.data.options.list.push({ img: "", url: "" });
+      this.$forceUpdate();
+    },
+    handleSelectLink (item) {
+      // 选择链接
+      this.$refs.liliDialog.open('link')
+      this.selected = item;
+    },
+    callbackSelected (item) { // 选择图片回调
+      this.picModelFlag = false;
+      this.selected.img = item.url;
+    },
+    handleDel(index) {
+      // 删除图片
+      this.data.options.list.splice(index, 1);
+    },
+    selectedLink(val) { // 选择链接回调
+      console.log(val);
+      this.selected.url = this.$options.filters.formatLinkType(val);
+      console.log(this.selected.url);
+    },
+    // 选择图片
+    handleSelectImg(item) {
+      this.selected = item;
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./setup-box.scss";
+.model-carousel {
+  width: 1200px;
+  height: 340px;
+  overflow: hidden;
+}
+
+.nav-item li {
+  float: left;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 30px;
+}
+.nav-item a {
+  text-decoration: none;
+  color: #555555;
+}
+.nav-item a:hover {
+  color: $theme_color;
+}
+/*大的导航信息，包含导航，幻灯片等*/
+.nav-body {
+  width: 1200px;
+  height: 340px;
+  margin: 0px auto;
+}
+.nav-side {
+  height: 100%;
+  width: 200px;
+  padding: 0px;
+  color: #fff;
+  float: left;
+  background-color: #6e6568;
+  line-height: 340px;
+  text-align: center;
+}
+
+/*导航内容*/
+.nav-content {
+  width: 800px;
+  height: 340px;
+  overflow: hidden;
+  float: left;
+  position: relative;
+}
+.nav-right {
+  float: left;
+  width: 200px;
+  .person-msg {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin: 20px auto;
+
+    button {
+      height: 25px !important;
+      margin-top: 10px;
+    }
+
+    .ivu-btn-default {
+      color: $theme_color;
+      border-color: $theme_color;
+    }
+
+    img {
+      margin-bottom: 10px;
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+    }
+  }
+  .shop-msg {
+    div {
+      width: 100%;
+      margin: 10px 27px;
+      span {
+        cursor: pointer;
+        text-align: center;
+        font-weight: bold;
+        margin-left: 5px;
+      }
+      span:nth-child(1) {
+        color: $theme_color;
+        margin-left: 0;
+      }
+      span:nth-child(2) {
+        font-weight: normal;
+      }
+      span:nth-child(3):hover {
+        color: $theme_color;
+      }
+    }
+
+    ul {
+      margin: 0 30px;
+      li {
+        cursor: pointer;
+        margin: 5px 0;
+        color: #999395;
+        &:hover {
+          color: $theme_color;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/seller/src/views/shop/modelList/carousel1.vue b/seller/src/views/shop/modelList/carousel1.vue
new file mode 100644
index 00000000..3ee291f5
--- /dev/null
+++ b/seller/src/views/shop/modelList/carousel1.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="model-carousel1" :style="{background: bgColor}">
+    <div class="nav-body clearfix">
+      <!-- 侧边导航 -->
+      <div class="nav-side">分类占位区</div>
+      <div class="nav-content setup-content">
+        <!-- 轮播图 -->
+        <Carousel autoplay @on-change="autoChange">
+          <CarouselItem v-for="(item, index) in data.options.list" :key="index" >
+            <div style="overflow: hidden">
+              <img :src="item.img" width="1200" height="470" />
+            </div>
+          </CarouselItem>
+        </Carousel>
+        <div class="setup-box">
+          <div>
+            <Button size="small" @click.stop="handleSelectModel">编辑</Button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Modal
+      v-model="showModal"
+      title="快捷导航"
+      draggable
+      width="800"
+      :z-index="100"
+      :mask-closable="false"
+      
+      
+    >
+      <div class="modal-tab-bar">
+        <Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
+        &nbsp;
+        <span class="ml_10">图片尺寸:{{ data.size }}</span>
+        <span style="color: red" class="fz_12 ml_10">点击缩略图替换图片、点击颜色选择器选择背景色</span>
+        <table cellspacing="0">
+          <thead>
+            <tr>
+              <th width="250">所选图片</th>
+              <th width="250">链接地址</th>
+              <th width="250">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in data.options.list" :key="index">
+              <td>
+                <img
+                  style="cursor: pointer"
+                  :src="item.img"
+                  @click="handleSelectImg(item)"
+                  width="200"
+                  height="100"
+                  alt=""
+                />
+              </td>
+              <td><Input v-model="item.url" disabled /></td>
+              <td>
+                <Button
+                  type="info"
+                  size="small"
+                  @click="handleSelectLink(item)"
+                  >选择链接</Button
+                >&nbsp;
+                <ColorPicker size="small" v-model="item.bgColor" />
+                &nbsp;
+                <Button
+                  type="error"
+                  ghost
+                  size="small"
+                  @click="handleDel(index)"
+                  >删除</Button
+                >
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Modal>
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+    
+    ></liliDialog>
+    <!-- 选择图片 -->
+    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+      <ossManage @callback="callbackSelected" ref="ossManage" />
+    </Modal>
+  </div>
+</template>
+
+<script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+export default {
+  name: "modelCarousel",
+  props: ["data"],
+  components: {
+    ossManage
+  },
+  data() {
+    return {
+      showModal: false, // modal显隐
+      selected: null, // 已选数据
+      picModelFlag: false, // 选择图片modal
+      bgColor:'#fff'  // 轮播背景色
+    };
+  },
+  mounted () {
+    this.bgColor = this.data.options.list[0].bgColor
+  },
+  methods: {
+    handleSelectModel () {
+      // 编辑模块
+      this.showModal = true;
+    },
+    // 自动切换时改变背景色
+    autoChange (oVal,val) {
+      this.bgColor = this.data.options.list[val].bgColor
+    },
+    // 添加轮播图片和链接
+    handleAdd () {
+      this.data.options.list.push({ img: "", url: "", bgColor: '#fff' });
+      this.$forceUpdate();
+    },
+    // 打开选择链接modal
+    handleSelectLink (item) {
+      this.$refs.liliDialog.open('link')
+      this.selected = item;
+    },
+    callbackSelected (item) { // 选择图片回调
+      this.picModelFlag = false;
+      this.selected.img = item.url;
+    },
+    // 删除图片
+    handleDel(index) {
+      this.data.options.list.splice(index, 1);
+    },
+    selectedLink(val) { // 选择链接回调
+      this.selected.url = this.$options.filters.formatLinkType(val);
+    },
+    // 打开选择图片modal
+    handleSelectImg(item) {
+      this.selected = item;
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./setup-box.scss";
+.model-carousel1 {
+  width: 1500px;
+  height: 470px;
+  margin-left: -150px;
+  background: #fff;
+}
+
+/*大的导航信息，包含导航，幻灯片等*/
+.nav-body {
+  width: 1200px;
+  height: 470px;
+  margin: 0px auto;
+  
+}
+.nav-side {
+  height: 100%;
+  width: 200px;
+  padding: 0px;
+  color: #fff;
+  background-color:rgba(0,0,0,.5);
+  line-height: 470px;
+  text-align: center;
+  position: absolute;
+  z-index: 1;
+}
+
+/*导航内容*/
+.nav-content {
+  width: 1200px;
+  height: 470px;
+  overflow: hidden;
+  float: left;
+  position: relative;
+}
+</style>
diff --git a/seller/src/views/shop/modelList/carousel2.vue b/seller/src/views/shop/modelList/carousel2.vue
new file mode 100644
index 00000000..97c8d70b
--- /dev/null
+++ b/seller/src/views/shop/modelList/carousel2.vue
@@ -0,0 +1,370 @@
+<template>
+  <div class="model-carousel2">
+    <div class="nav-body clearfix">
+      <!-- 侧边导航 -->
+      <div class="nav-side">分类占位区</div>
+      <div class="nav-content setup-content">
+        <!-- 轮播图 -->
+        <Carousel autoplay>
+          <CarouselItem v-for="(item, index) in data.options.list" :key="index">
+            <div style="overflow: hidden">
+              <img :src="item.img" width="590" height="470" />
+            </div>
+          </CarouselItem>
+        </Carousel>
+        <div class="setup-box">
+          <div>
+            <Button size="small" @click.stop="handleSelectModel">编辑</Button>
+          </div>
+        </div>
+      </div>
+      <div class="nav-content1 setup-content">
+        <!-- 轮播图 -->
+        <Carousel autoplay :autoplay-speed="5000">
+          <CarouselItem v-for="(item, index) in data.options.listRight" :key="index">
+            <div class="mb_10">
+              <img :src="item[0].img" width="190" height="150" />
+            </div>
+            <div class="mb_10">
+              <img :src="item[1].img" width="190" height="150" />
+            </div>
+            <div>
+              <img :src="item[2].img" width="190" height="150" />
+            </div>
+          </CarouselItem>
+        </Carousel>
+        <div class="setup-box">
+          <div>
+            <Button size="small" @click.stop="handleSelectModel">编辑</Button>
+          </div>
+        </div>
+      </div>
+      <div class="nav-right">
+        <div class="person-msg">
+          <img :src="userInfo.face" v-if="userInfo.face" alt />
+          <Avatar icon="ios-person" class="mb_10" v-else size="80" />
+          <div>Hi，{{ userInfo.nickName || "欢迎来到管理后台" | secrecyMobile }}</div>
+          <div v-if="userInfo.id">
+            <Button type="error" shape="circle">会员中心</Button>
+          </div>
+          <div v-else>
+            <Button type="error" shape="circle">请登录</Button>
+          </div>
+        </div>
+        <div class="shop-msg">
+          <div>
+            <span>常见问题</span>
+            <ul class="article-list">
+              <li class="ellipsis" :alt="article.title" v-for="(article, index) in articleList" :key="index" @click="goArticle(article.id)">
+                {{article.title}}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 左侧轮播装修 -->
+    <Modal
+      v-model="showModal"
+      title="快捷导航"
+      draggable
+      width="800"
+      :z-index="100"
+      :mask-closable="false"
+    >
+      <div class="modal-tab-bar">
+        <Button type="primary" size="small" @click="handleAdd">添加轮播</Button>
+        &nbsp;
+        <span class="ml_10">图片尺寸:{{ data.size }}</span>
+        <span style="color: red" class="fz_12 ml_10">点击缩略图替换图片</span>
+        <table cellspacing="0">
+          <thead>
+            <tr>
+              <th width="250">所选图片</th>
+              <th width="250">链接地址</th>
+              <th width="250">操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(item, index) in data.options.list" :key="index">
+              <td>
+                <img
+                  style="cursor: pointer"
+                  :src="item.img"
+                  @click="handleSelectImg(item)"
+                  width="200"
+                  height="100"
+                  alt=""
+                />
+              </td>
+              <td><Input v-model="item.url" disabled /></td>
+              <td>
+                <Button
+                  type="info"
+                  size="small"
+                  @click="handleSelectLink(item)"
+                  >选择链接</Button>&nbsp;
+                <Button
+                  type="error"
+                  ghost
+                  size="small"
+                  @click="handleDel(index)"
+                  >删除</Button
+                >
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Modal>
+    <!-- 右侧轮播装修 -->
+    <Modal
+      v-model="showModal"
+      title="右侧装修"
+      draggable
+      width="800"
+      :z-index="100"
+      :mask-closable="false"
+    >
+      <div class="modal-tab-bar">
+        <Button type="primary" size="small" @click="handleAddGroup">添加组</Button>
+        &nbsp;
+        <span class="ml_10">图片尺寸:{{ data.size }}</span>
+        <span style="color: red" class="fz_12 ml_10">点击缩略图替换图片</span>
+        <Tabs type="card" closable @on-tab-remove="handleTabRemove" class="mt_10">
+          <TabPane :label="'图片组'+(gIndex+1)" v-for="(group, gIndex) in data.options.listRight" :key="gIndex">
+            <table cellspacing="0">
+              <thead>
+                <tr>
+                  <th width="250">所选图片</th>
+                  <th width="250">链接地址</th>
+                  <th width="250">操作</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(item, index) in group" :key="index">
+                  <td>
+                    <img
+                      style="cursor: pointer"
+                      :src="item.img"
+                      @click="handleSelectImg(item)"
+                      width="200"
+                      height="100"
+                      alt=""
+                    />
+                  </td>
+                  <td><Input v-model="item.url" disabled /></td>
+                  <td>
+                    <Button
+                      type="info"
+                      size="small"
+                      @click="handleSelectLink(item)"
+                      >选择链接</Button>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </TabPane>
+        </Tabs>
+        
+      </div>
+    </Modal>
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+     
+    ></liliDialog>
+    <!-- 选择图片 -->
+    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+      <ossManage @callback="callbackSelected" ref="ossManage" />
+    </Modal>
+  </div>
+</template>
+
+<script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+export default {
+  name: "modelCarousel",
+  props: ["data"],
+  components: {
+    ossManage
+  },
+  data() {
+    return {
+      showModal: false, // modal显隐
+      selected: null, // 已选数据
+      picModelFlag: false, // 选择图片modal
+      userInfo:{},
+      articleList:[
+        {title:'促销计算规则'},
+        {title:'商家申请开店'},
+        {title:'商家账号注册'},
+        {title:'促销计算规则'}
+      ]
+    };
+  },
+
+  methods: {
+    handleSelectModel () {
+      // 编辑模块
+      this.showModal = true;
+    },
+    // 添加轮播
+    handleAdd () {
+      this.data.options.list.push({ img: "", url: "" });
+      this.$forceUpdate();
+    },
+    // 添加图片组
+    handleAddGroup () {
+      this.data.options.listRight.push([
+        {img:'',url:''},
+        {img:'',url:''},
+        {img:'',url:''}
+      ])
+    },
+    // 删除图片组
+    handleTabRemove  (index) {
+      this.data.options.listRight.splice(index, 1)
+    },
+    // 打开图片链接
+    handleSelectLink (item) {
+      this.$refs.liliDialog.open('link')
+      this.selected = item;
+    },
+    callbackSelected (item) { // 选择图片回调
+      this.picModelFlag = false;
+      this.selected.img = item.url;
+    },
+    // 删除图片
+    handleDel(index) {
+      this.data.options.list.splice(index, 1);
+    },
+    selectedLink(val) { // 选择链接回调
+      console.log(val);
+      this.selected.url = this.$options.filters.formatLinkType(val);
+      console.log(this.selected.url);
+    },
+    // 打开选择图片modal
+    handleSelectImg(item) {
+      this.selected = item;
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./setup-box.scss";
+.model-carousel2 {
+  width: 1200px;
+  height: 470px;
+  overflow: hidden;
+}
+
+.nav-item li {
+  float: left;
+  font-size: 16px;
+  font-weight: bold;
+  margin-left: 30px;
+}
+.nav-item a {
+  text-decoration: none;
+  color: #555555;
+}
+.nav-item a:hover {
+  color: $theme_color;
+}
+/*大的导航信息，包含导航，幻灯片等*/
+.nav-body {
+  width: 1200px;
+  height: 470px;
+  margin: 0px auto;
+}
+.nav-side {
+  height: 100%;
+  width: 200px;
+  padding: 0px;
+  color: #fff;
+  float: left;
+  background-color: #6e6568;
+  line-height: 470px;
+  text-align: center;
+}
+
+/*导航内容*/
+.nav-content,.nav-content1 {
+  width: 590px;
+  height: 470px;
+  overflow: hidden;
+  float: left;
+  position: relative;
+  margin-left: 10px;
+}
+.nav-content1{
+  width: 190px;
+}
+.nav-right {
+  float: left;
+  width: 190px;
+  margin-left: 10px;
+  .person-msg {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    margin: 20px auto;
+
+    button {
+      height: 25px !important;
+      margin-top: 10px;
+    }
+
+    .ivu-btn-default {
+      color: $theme_color;
+      border-color: $theme_color;
+    }
+
+    img {
+      margin-bottom: 10px;
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+    }
+  }
+  .shop-msg {
+    div {
+      width: 100%;
+      margin: 10px 27px;
+      span {
+        cursor: pointer;
+        text-align: center;
+        font-weight: bold;
+        margin-left: 5px;
+      }
+      span:nth-child(1) {
+        color: $theme_color;
+        margin-left: 0;
+      }
+      span:nth-child(2) {
+        font-weight: normal;
+      }
+      span:nth-child(3):hover {
+        color: $theme_color;
+      }
+    }
+    ul {
+      li {
+        cursor: pointer;
+        margin: 5px 0;
+        color: #999395;
+        width: 150px;
+        font-size: 12px;
+        &:hover {
+          color: $theme_color;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/seller/src/views/shop/modelList/firstPageAdvert.vue b/seller/src/views/shop/modelList/firstPageAdvert.vue
new file mode 100644
index 00000000..a4cbaa1c
--- /dev/null
+++ b/seller/src/views/shop/modelList/firstPageAdvert.vue
@@ -0,0 +1,162 @@
+<template>
+    <div class="first-page-advert">
+        <div class="item setup-content" :style="{backgroundImage:`linear-gradient(to right, ${item.fromColor}, ${item.toColor})`}" v-for="(item, index) in options.list" :key="index">
+            <div>
+                <span class="line top-line"></span>
+                <p>{{item.name}}</p>
+                <span class="line btm-line"></span>
+                <p>{{item.describe}}</p>
+            </div>
+            <img :src="item.img" width="170" height="170" alt="">
+            <div class="setup-box">
+                <div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
+            </div>
+        </div>
+        <Modal
+            v-model="showModal"
+            title="装修"
+            draggable
+            width="800"
+            :z-index="100"
+            :mask-closable="false"
+
+
+            >
+            <div class="modal-top-advert">
+                <div>
+                    <img class="show-image" width="170" height="170"  :src="selected.img" alt />
+                </div>
+                <div>
+                    <span>图片主标题：</span><Input v-model="selected.name" />
+                </div>
+                <div>
+                    <span>图片描述：</span><Input v-model="selected.describe" />
+                </div>
+                <div class="tips">
+                    建议尺寸：<span>{{ selected.size }}</span>
+                </div>
+                <div>
+                    图片链接：<span>{{ selected.url }}</span> <Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
+                </div>
+                <div>
+                    <span>渐变背景色：</span><Input v-model="selected.fromColor" /> <ColorPicker v-if="selected.fromColor" v-model="selected.fromColor" />
+                </div>
+                <div>
+                    <span>渐变背景色：</span><Input v-model="selected.toColor" /> <ColorPicker v-if="selected.toColor" v-model="selected.toColor" />
+                </div>
+                <div :style="{backgroundImage:`linear-gradient(to right, ${selected.fromColor}, ${selected.toColor})`}" class="exhibition"></div>
+                <div>
+                    选择图片：<Button size="small" type="primary" @click="handleSelectImg">选择图片</Button>&nbsp;
+                </div>
+            </div>
+        </Modal>
+        <!-- 选择商品。链接 -->
+        <liliDialog
+            ref="liliDialog"
+            @selectedLink="selectedLink"
+
+        ></liliDialog>
+        <!-- 选择图片 -->
+        <Modal width="1200px" v-model="picModelFlag" footer-hide>
+            <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
+        </Modal>
+    </div>
+</template>
+<script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+export default {
+    props:{
+        data: {
+            type: Object,
+            default: null
+        }
+    },
+    components: {ossManage},
+    data() {
+        return {
+            options: this.data.options, // 当前类型数据
+            showModal: false, // modal显隐
+            selected: {}, // 已选数据
+            picModelFlag: false // 图片选择器
+        }
+    },
+    methods:{
+        // 打开装修modal
+        handleSelectModel (item,type) {
+            this.selected = item;
+            this.showModal = true
+        },
+        handleSelectLink(item,index) { // 调起选择链接弹窗
+            this.$refs.liliDialog.open('link')
+        },
+        // 选择链接回调
+        selectedLink(val) {
+            this.selected.url = this.$options.filters.formatLinkType(val);;
+        },
+        handleSelectImg(){ // 选择图片
+            this.$refs.ossManage.selectImage = true;
+            this.picModelFlag = true;
+        },
+        // 选择图片回调
+        callbackSelected (val) {
+            this.picModelFlag = false;
+            this.selected.img = val.url;
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+@import './setup-box.scss';
+.first-page-advert{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    // margin-top: -10px;
+    .item{
+        width: 393px;
+        height: 170px;
+        margin-top: 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img{margin-left: 20px;}
+
+        &:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3){margin-top: 0;}
+
+        p:nth-of-type(1){
+            margin: 3px 0;
+            font-size: 18px;
+            color: #fff;
+        }
+        p:nth-of-type(2){
+            margin-top: 3px;
+            color: #fff;
+        }
+
+    }
+    .line{
+        position: relative;
+        display: block;
+        height: 2px;
+        background: url('../../../assets/festival_icon.png');
+        z-index: 1;
+    }
+    .top-line{
+        width: 78px;
+        background-position: -1px -3px;
+    }
+    .btm-line{
+        background-position: 0 -11px;
+        width: 154px;
+    }
+
+}
+.modal-top-advert{
+    align-items: start;
+    padding: 0 30px;
+    .exhibition{
+        width: 300px;
+        height: 50px;
+    }
+}
+</style>
diff --git a/seller/src/views/shop/modelList/newGoodsSort.vue b/seller/src/views/shop/modelList/newGoodsSort.vue
new file mode 100644
index 00000000..465839ca
--- /dev/null
+++ b/seller/src/views/shop/modelList/newGoodsSort.vue
@@ -0,0 +1,339 @@
+<template>
+    <div class="new-goods">
+
+        <div class="left">
+            <div class="top-header setup-content" :style="{background:options.left.bgColor}">
+                <span>{{options.left.title}}</span>
+                <span>{{options.left.secondTitle}} &gt;</span>
+                <div class="setup-box">
+                    <div><Button size="small" @click.stop="handleSelectModel(options.left,true)">编辑</Button></div>
+                </div>
+            </div>
+            <div class="content">
+                <div class="con-item setup-content" v-for="(item, index) in options.left.list" :key="index">
+                    <div>
+                        <p>{{item.name}}</p>
+                        <p class="describe">{{item.describe}}</p>
+                    </div>
+                    <img :src="item.img" alt="">
+                    <div class="setup-box">
+                        <div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="middle">
+            <div class="top-header setup-content" :style="{background:options.middle.bgColor}">
+                <span>{{options.middle.title}}</span>
+                <span>{{options.middle.secondTitle}} &gt;</span>
+                <div class="setup-box">
+                    <div><Button size="small" @click.stop="handleSelectModel(options.middle,true)">编辑</Button></div>
+                </div>
+            </div>
+            <div class="content">
+                <div class="con-item setup-content" v-for="(item, index) in options.middle.list" :key="index">
+                    <div>
+                        <p>{{item.name}}</p>
+                        <p class="describe">{{item.describe}}</p>
+                    </div>
+                    <img :src="item.img" alt="">
+                    <div class="setup-box">
+                        <div><Button size="small" @click.stop="handleSelectModel(item)">编辑</Button></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="right">
+            <div class="top-header setup-content" :style="{background:options.right.bgColor}">
+                <span>{{options.right.title}}</span>
+                <span>{{options.right.secondTitle}} &gt;</span>
+                <div class="setup-box">
+                    <div><Button size="small" @click.stop="handleSelectModel(options.right,true)">编辑</Button></div>
+                </div>
+            </div>
+            <div class="content">
+                <div class="setup-content" v-for="(item, index) in options.right.list" :key="index">
+                    <img :src="item.img" alt="">
+                    <p>{{item.name}}</p>
+                    <p>{{item.price | unitPrice('￥')}}</p>
+                    <div class="jiaobiao" :class="'jiaobiao'+(index+1)">{{index+1}}</div>
+                    <div class="setup-box">
+                        <div><Button size="small" @click.stop="handleSelectGoods(item)">编辑</Button></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- 装修内容 -->
+        <Modal
+            v-model="showModal"
+            title="装修"
+            draggable
+            width="800"
+            :z-index="100"
+            :mask-closable="false"
+
+
+            >
+            <div class="modal-top-advert">
+                <div>
+                    <img class="show-image" width="160" height="160" v-if="selected.size && selected.size.indexOf('160*160')>=0" :src="selected.img" alt />
+                    <img class="show-image" width="80" height="80" v-if="selected.size && selected.size.indexOf('90*90')>=0" :src="selected.img" alt />
+                </div>
+                <div>
+                    <span>图片主标题：</span><Input v-model="selected.name" />
+                </div>
+                <div>
+                    <span>图片描述：</span><Input v-model="selected.describe" />
+                </div>
+                <div class="tips">
+                    建议尺寸：<span>{{ selected.size }}</span>
+                </div>
+                <div>
+                    图片链接：<span>{{ selected.url }}</span> <Button size="small" type="primary" @click="handleSelectLink">选择链接</Button>
+                </div>
+                <div>
+                    <Button size="small" type="primary" @click="handleSelectImg">选择图片</Button>&nbsp;
+
+                    <Button size="small" type="primary" @click="handleSelectGoods('')">选择商品</Button>
+                </div>
+            </div>
+        </Modal>
+        <!-- 装修标题 -->
+        <Modal
+            v-model="showModal1"
+            title="装修"
+            draggable
+            width="800"
+            :z-index="100"
+            :mask-closable="false"
+
+
+            >
+            <div class="modal-top-advert">
+                <div>
+                    <span>主标题：</span><Input v-model="selected.title" />
+                </div>
+                <div>
+                    <span>副标题：</span><Input v-model="selected.secondTitle" />
+                </div>
+                <div>
+                    <span>副标题链接：{{selected.url}}</span><Button size="small" class="ml_10" type="primary" @click="handleSelectLink">选择链接</Button>
+                </div>
+                <div>
+                    <span>背景色：</span><ColorPicker v-if="selected.bgColor" v-model="selected.bgColor" />
+                </div>
+            </div>
+        </Modal>
+        <!-- 选择商品。链接 -->
+        <liliDialog
+            ref="liliDialog"
+            @selectedLink="selectedLink"
+            @selectedGoodsData="selectedGoodsData"
+        ></liliDialog>
+        <!-- 选择图片 -->
+        <Modal width="1200px" v-model="picModelFlag" footer-hide>
+            <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
+        </Modal>
+    </div>
+</template>
+<script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+export default {
+    props:{
+        data:{
+            type:Object,
+            default:null
+        }
+    },
+    components:{
+      ossManage
+    },
+    data() {
+        return {
+            options:this.data.options, // 当前数据
+            showModal:false, // modal显隐
+            showModal1:false, // modal显隐
+            selected: {}, // 已选数据
+            picModelFlag: false // 选择图片modal
+        }
+    },
+    methods:{
+        // 装修modal
+        handleSelectModel (item, type) {
+            this.selected = item;
+            console.warn(item);
+            if(type){
+                this.showModal1 = true
+            } else {
+                this.showModal = true
+            }
+
+        },
+        handleSelectLink() { // 调起选择链接弹窗
+            this.$refs.liliDialog.open('link')
+        },
+        handleSelectGoods(item) { // 调起选择商品
+            console.warn(item);
+            if (item) this.selected = item;
+            this.$refs.liliDialog.open('goods', 'single')
+            setTimeout(() => {
+                this.$refs.liliDialog.goodsData = [this.selected]
+            }, 500);
+        },
+        // 选择链接回调
+        selectedLink (val) {
+            this.selected.url = this.$options.filters.formatLinkType(val);
+        },
+        // 选择商品回调
+        selectedGoodsData (val) {
+            console.log(val);
+            let goods = val[0]
+            console.log(this.selected);
+            this.selected.img = goods.thumbnail
+            this.selected.price = goods.price
+            this.selected.name = goods.goodsName
+            this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`
+        },
+        handleSelectImg(){ // 选择图片
+            this.$refs.ossManage.selectImage = true;
+            this.picModelFlag = true;
+        },
+        // 选择图片回显
+        callbackSelected (val) {
+            this.picModelFlag = false;
+            this.selected.img = val.url;
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+@import './setup-box.scss';
+.new-goods{
+    display: flex;
+    justify-content: space-between;
+    >div{
+        width: 393px;
+        height: 440px;
+    }
+
+    .left>.content{
+        >div:nth-child(1){
+            height: 240px;
+            flex-direction: column;
+            border: 1px solid #eee;
+            border-top: none;
+            border-left: none;
+            justify-content: space-between;
+            img{
+                width: 160px;
+                height: 160px;
+            }
+            .describe{margin-top: 10px;}
+        }
+        >div:nth-child(2){border-right: 1px solid #eee;}
+        >div:nth-child(3),>div:nth-child(4){border-bottom: 1px solid #eee;}
+    }
+
+    .middle>.content{
+        >div{
+            border-style:solid;
+            border-color: #eee;
+            border-width: 0;
+            border-bottom-width: 1px;
+        }
+        >div:nth-child(1),>div:nth-child(2),>div:nth-child(3){border-right-width: 1px;}
+        >div:nth-child(6), >div:nth-child(3){border-bottom-width: 0;}
+    }
+
+    .right>.content{
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        font-size: 12px;
+        >div{
+            position: relative;
+            width: 120px;
+            padding: 5px 10px 0 10px;
+            img{
+                width: 100px;
+                height: 100px;
+            }
+            border-bottom: 1px solid #eee;
+            :nth-child(2){
+                height: 38px;
+                overflow: hidden;
+            }
+            :nth-child(3){
+                color: $theme_color;
+                margin-top: 5px;
+            }
+            .jiaobiao{
+                position: absolute;
+                width: 23px;
+                height: 23px;
+                top: 10px;
+                right: 16px;
+                background: url('../../../assets/festival_icon.png');
+                color: #FFF;
+                text-align: center;
+            }
+            .jiaobiao1,.jiaobiao4{
+                background-position: -2px -30px;
+            }
+            .jiaobiao2,.jiaobiao5{
+                background-position: -31px -30px;
+            }
+            .jiaobiao3,.jiaobiao6{
+                background-position: -60px -30px;
+            }
+        }
+        >div:nth-child(4),>div:nth-child(5),>div:nth-child(6){border: none;}
+    }
+
+    .top-header{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 50px;
+        padding: 0 10px;
+        background: #c43d7e;
+        color: #fff;
+        span:nth-child(1){
+            font-size: 20px;
+        }
+        span:nth-child(2){
+            font-size: 12px;
+        }
+    }
+    .content{
+        padding: 10px 12px 0;
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: column;
+        height: 370px;
+    }
+    .con-item{
+        width: 185px;
+        height: 120px;
+        display: flex;
+        padding-left: 10px;
+        padding-top: 10px;
+        img{
+            width: 90px;
+            height: 90px;
+            margin-top: 10px;
+        }
+    }
+    .describe{
+        color: #999;
+        font-size: 12px;
+        margin-top: 15px;
+    }
+}
+.modal-top-advert{
+    align-items: start;
+    padding: 0 30px;
+}
+</style>
diff --git a/seller/src/views/shop/modelList/notEnough.vue b/seller/src/views/shop/modelList/notEnough.vue
new file mode 100644
index 00000000..fc00097a
--- /dev/null
+++ b/seller/src/views/shop/modelList/notEnough.vue
@@ -0,0 +1,226 @@
+<template>
+    <div class="not-enough">
+        <ul class="nav-bar setup-content">
+            <li v-for="(item, index) in conData.options.navList" :class="currentIndex===index?'curr':''" @click="changeCurr(index)" :key="index">
+                <p>{{item.title}}</p>
+                <p>{{item.desc}}</p>
+            </li>
+            <div class="setup-box" style="width:100px;left:1100px;">
+                <div>
+                    <Button size="small" @click.stop="handleSelectModel">编辑</Button>
+                </div>
+            </div>
+        </ul>
+        <div class="content" v-if="showContent">
+            <div v-for="(item, index) in conData.options.list[currentIndex]" :key="index" class="setup-content">
+                <img :src="item.img" width="210" height="210" :alt="item.name">
+                <p>{{item.name}}</p>
+                <p>
+                    <span>{{item.price | unitPrice('￥')}}</span> 
+                    <!-- <span>{{item.price | unitPrice('￥')}}</span> -->
+                </p>
+                <div class="setup-box">
+                    <div>
+                        <Button size="small" @click.stop="handleSelectGoods(item)">编辑</Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <Modal
+            v-model="showModal"
+            title="装修"
+            draggable
+            width="800"
+            :z-index="100"
+            :mask-closable="false"
+            >
+            <div class="modal-tab-bar">
+                <Button type="primary" size='small' @click="handleAddNav">添加分类</Button>
+                <table cellspacing="0">
+                    <thead>
+                        <tr>
+                            <th width="250">主标题</th>
+                            <th width="250">描述</th>
+                            <th width="250">操作</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(item, index) in conData.options.navList" :key="index">
+                            <td><Input v-model="item.title" /></td>
+                            <td><Input v-model="item.desc" /></td>
+                            <td v-if="index!=0">
+                                <Button type="error" size="small" @click="handleDelNav(index)">删除</Button>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </Modal>
+        <!-- 选择商品。链接 -->
+        <liliDialog
+            ref="liliDialog"
+            @selectedGoodsData="selectedGoodsData"
+        ></liliDialog>
+    </div>
+</template>
+<script>
+export default {
+    props:{
+        data:{
+            type: Object,
+            default: null
+        }
+    },
+    data() {
+        return {
+            currentIndex:0, // 当前商品index
+            conData:this.data, // 当前数据
+            selected:{}, // 已选数据
+            showModal:false, // modal显隐
+            showContent:true, // 选择后刷新数据用
+        }
+    },
+    watch:{
+        data:function(val){
+            this.conData = val
+        },
+        conData:function(val){
+            this.$emit('content',val)
+        }
+    },
+    methods:{
+        // tab点击切换
+        changeCurr(index){
+            this.currentIndex = index;
+        },
+        // 编辑
+        handleSelectModel (item,type) {
+            this.selected = item;
+            this.showModal = true
+        },
+        handleSelectGoods(item) { // 调起选择商品弹窗
+            if(item) this.selected = item;
+            this.$refs.liliDialog.open('goods', 'single')
+            setTimeout(() => {
+                this.$refs.liliDialog.goodsData = [this.selected]
+            }, 500);
+        },
+        // 选择商品回调
+        selectedGoodsData(val){
+            console.log(val)
+            let goods = val[0]
+            this.selected.img = goods.thumbnail
+            this.selected.price = goods.price
+            this.selected.name = goods.goodsName
+            this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`
+        },
+        handleDelNav(index){ // 删除导航
+            this.conData.options.navList.splice(index,1)
+            this.conData.options.list.splice(index,1)
+        },
+        handleAddNav(){ // 添加导航
+            this.conData.options.navList.push(
+                {title:'',desc:''}
+            )
+            this.conData.options.list.push(
+                [{ img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                { img:'', name:'', price:0, url:'' },
+                ],
+            )
+            this.showContent = false
+            this.$nextTick(()=>{
+                this.showContent = true;
+            })
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+@import './setup-box.scss';
+.nav-bar{
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin-bottom: 10px;
+    background-color: rgb(218, 217, 217);
+    height: 60px;
+    align-items: center;
+    position: relative;
+    li{
+        padding: 0 30px;
+        text-align: center;
+        p:nth-child(1){
+            font-size: 16px;
+            border-radius: 50px;
+            padding: 0 7px;
+        }
+
+        p:nth-child(2){
+            font-size: 14px;
+            color: #999;
+        }
+
+        &:hover{
+            p{
+                color: $theme_color;
+            }
+            cursor: pointer;
+        }
+        border-right: 1px solid #eee;
+        
+    }
+    li:last-of-type{
+        border: none;
+    }
+   
+    .curr{
+        p:nth-child(1){
+            background-color: $theme_color;
+            
+            color: #fff;
+        }
+        p:nth-child(2){
+            color: $theme_color;
+        }
+    }
+}
+
+.content{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    >div{
+        padding: 10px;
+        box-sizing: border-box;
+        border: 1px solid #eee;
+        margin-bottom: 10px;
+        p:nth-of-type(1){
+            overflow: hidden;
+            width: 210px;
+            white-space: nowrap;
+            text-overflow:ellipsis;
+            margin: 10px 0 5px 0;
+        }
+        p:nth-of-type(2){
+            color: $theme_color;
+            font-size: 16px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            span:nth-child(2){
+                text-decoration: line-through;
+                font-size: 12px;
+                color: #999;
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/seller/src/views/shop/modelList/recommend.vue b/seller/src/views/shop/modelList/recommend.vue
new file mode 100644
index 00000000..a3847530
--- /dev/null
+++ b/seller/src/views/shop/modelList/recommend.vue
@@ -0,0 +1,418 @@
+<template>
+  <div class="recommend">
+    <div class="recommend-left">
+      <div
+        class="head-recommend setup-content"
+        :style="{ background: msgLeft.bgColor }"
+      >
+        <span>{{ msgLeft.title }}</span>
+        <span>{{ msgLeft.secondTitle }}&gt;</span>
+        <div class="setup-box">
+          <div>
+            <Button size="small" @click.stop="handleSelectModel(msgLeft, true)"
+              >编辑</Button
+            >
+          </div>
+        </div>
+      </div>
+      <div class="content-left">
+        <div class="setup-content">
+          <img :src="msgLeft.list[0].img" width="160" height="160" alt="" />
+          <div class="margin-left">{{ msgLeft.list[0].name }}</div>
+          <div class="margin-left">{{ msgLeft.list[0].describe }}</div>
+          <Button
+            size="small"
+            :style="{ background: msgLeft.bgColor }"
+            class="fz_12 view-btn"
+            >点击查看</Button
+          >
+          <div class="setup-box">
+            <div>
+              <Button
+                size="small"
+                @click.stop="handleSelectModel(msgLeft.list[0])"
+                >编辑</Button
+              >
+            </div>
+          </div>
+        </div>
+        <div>
+          <template v-for="(item, index) in msgLeft.list">
+            <div v-if="index != 0" :key="index" class="setup-content">
+              <img :src="item.img" width="80" height="80" alt="" />
+              <div>
+                <div>{{ item.name }}</div>
+                <div>{{ item.describe }}</div>
+              </div>
+              <div class="setup-box">
+                <div>
+                  <Button size="small" @click.stop="handleSelectModel(item)"
+                    >编辑</Button
+                  >
+                </div>
+              </div>
+            </div>
+          </template>
+        </div>
+      </div>
+    </div>
+    <div class="recommend-right">
+      <div
+        class="head-recommend setup-content"
+        :style="{ background: msgRight.bgColor }"
+      >
+        <span>{{ msgRight.title }}</span>
+        <span>{{ msgRight.secondTitle }}&gt;</span>
+        <div class="setup-box">
+          <div>
+            <Button size="small" @click.stop="handleSelectModel(msgRight, true)"
+              >编辑</Button
+            >
+          </div>
+        </div>
+      </div>
+      <div class="content-right">
+        <div
+          v-for="(item, index) in msgRight.list"
+          :key="index"
+          class="setup-content"
+        >
+          <div
+            class="right-item"
+            :style="{ border: index === 2 || index === 3 ? 'none' : '' }"
+          >
+            <div>
+              <span :style="{ background: msgRight.bgColor }">{{
+                item.name
+              }}</span>
+              <span>{{ item.describe }}</span>
+            </div>
+            <div class="right-img">
+              <img :src="item.img" alt="" />
+            </div>
+          </div>
+          <div class="setup-box">
+            <div>
+              <Button size="small" @click.stop="handleSelectModel(item)"
+                >编辑</Button
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <Modal
+      v-model="showModal"
+      title="装修"
+      draggable
+      width="800"
+      :z-index="100"
+      :mask-closable="false"
+      
+      
+    >
+      <div class="modal-top-advert">
+        <div>
+          <img
+            class="show-image"
+            width="160"
+            height="160"
+            v-if="selected.size && selected.size.indexOf('160*160') >= 0"
+            :src="selected.img"
+            alt
+          />
+          <img
+            class="show-image"
+            width="80"
+            height="80"
+            v-if="selected.size && selected.size.indexOf('80*80') >= 0"
+            :src="selected.img"
+            alt
+          />
+          <img
+            class="show-image"
+            width="100"
+            height="100"
+            v-if="selected.size && selected.size.indexOf('100*100') >= 0"
+            :src="selected.img"
+            alt
+          />
+        </div>
+        <div><span>图片主标题：</span><Input v-model="selected.name" /></div>
+        <div><span>图片描述：</span><Input v-model="selected.describe" /></div>
+        <div class="tips">
+          建议尺寸：<span>{{ selected.size }}</span>
+        </div>
+        <div>
+          图片链接：<span>{{ selected.url }}</span>
+          <Button
+            size="small"
+            class="ml_10"
+            type="primary"
+            @click="handleSelectLink"
+            >选择链接</Button
+          >
+        </div>
+        <div>
+          <Button size="small" type="primary" @click="handleSelectImg"
+            >选择图片</Button
+          >&nbsp;
+          <Button size="small" type="primary" @click="handleSelectGoods"
+            >选择商品</Button
+          >
+        </div>
+      </div>
+    </Modal>
+    <Modal
+      v-model="showModal1"
+      title="装修"
+      draggable
+      width="800"
+      :z-index="100"
+      :mask-closable="false"
+      
+      
+    >
+      <div class="modal-top-advert">
+        <div><span>主标题：</span><Input v-model="selected.title" /></div>
+        <div><span>副标题：</span><Input v-model="selected.secondTitle" /></div>
+        <div>
+          <span>副标题链接：{{ selected.url }}</span
+          ><Button
+            size="small"
+            class="ml_10"
+            type="primary"
+            @click="handleSelectLink"
+            >选择链接</Button
+          >
+        </div>
+        <div>
+          <span>背景色：</span><Input v-model="selected.bgColor" />
+          <ColorPicker v-if="selected.bgColor" v-model="selected.bgColor" />
+        </div>
+      </div>
+    </Modal>
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+    <!-- 选择图片 -->
+    <Modal width="1200px" v-model="picModelFlag" footer-hide>
+      <ossManage @callback="callbackSelected" :isComponent="true" ref="ossManage" />
+    </Modal>
+  </div>
+</template>
+<script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+export default {
+  props: {
+    data: {
+      type: Object,
+      default: {},
+    },
+  },
+  components: {
+    ossManage,
+  },
+  data() {
+    return {
+      msgLeft: this.data.options.contentLeft, // 左侧数据
+      msgRight: this.data.options.contentRight, // 右侧数据
+      showModal: false, // modal显隐
+      showModal1: false, // modal显隐
+      selected: {}, // 已选数据
+      picModelFlag: false, // 图片选择
+    };
+  },
+  methods: {
+    // 编辑
+    handleSelectModel(item, type) {
+      this.selected = item;
+      if (type) {
+        this.showModal1 = true;
+      } else {
+        this.showModal = true;
+      }
+    },
+    handleSelectLink(item, index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+    },
+    handleSelectGoods(item) {
+      // 调起选择商品
+      this.$refs.liliDialog.open('goods', 'single')
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      this.selected.url = this.$options.filters.formatLinkType(val);
+    },
+    // 选择商品回调
+    selectedGoodsData(val) {
+      console.log(val);
+      let goods = val[0];
+      this.selected.img = goods.thumbnail;
+      this.selected.price = goods.price;
+      this.selected.name = goods.goodsName;
+      this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+    },
+    handleSelectImg() {
+      // 选择图片
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
+    // 选择图片回调
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.selected.img = val.url;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+@import "./setup-box.scss";
+.recommend {
+  display: flex;
+  justify-content: space-between;
+  .recommend-left {
+    width: 595px;
+    .content-left {
+      display: flex;
+      padding-top: 10px;
+      font-size: 12px;
+      > div:nth-child(1) {
+        width: 189px;
+        border-right: 1px solid #eee;
+        height: 360px;
+        img {
+          margin: 40px 0 0 15px;
+        }
+        .margin-left {
+          margin-left: 15px;
+          width: 145px;
+        }
+        div:nth-of-type(1) {
+          font-weight: bold;
+          border-top: 1px solid #eee;
+          padding-top: 10px;
+          padding-bottom: 10px;
+        }
+        div:nth-of-type(2) {
+          color: #999;
+        }
+        .view-btn {
+          margin-left: 15px;
+          margin-top: 10px;
+          color: #fff;
+        }
+      }
+      > div:nth-child(2) {
+        width: 405px;
+        display: flex;
+        flex-wrap: wrap;
+        > div {
+          display: flex;
+          align-items: center;
+          width: 200px;
+          height: 120px;
+          img {
+            margin: 0 10px;
+          }
+          > div:nth-child(2) {
+            // margin: 0 10px;
+            :nth-child(2) {
+              color: #449dae;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .recommend-right {
+    width: 595px;
+    height: 360px;
+    .head-recommend {
+      background: #a25684;
+    }
+    .content-right {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      padding-top: 10px;
+      > div {
+        width: 50%;
+        text-align: center;
+        height: 180px;
+        padding-top: 10px;
+        .right-item {
+          border-bottom: 1px solid #eee;
+          display: flex;
+          margin-top: 30px;
+          margin-left: 5px;
+          margin-right: 5px;
+          height: 150px;
+          padding: 0 10px;
+          font-size: 12px;
+          > div:nth-child(1) {
+            width: 130px;
+            margin-top: 30px;
+            span:nth-child(1) {
+              color: #fff;
+              border-radius: 10px;
+              padding: 0 5px;
+              background-color: #a25684;
+              display: block;
+              width: 120px;
+              overflow: hidden;
+              white-space: nowrap;
+              margin: 0 10px 10px 0;
+            }
+            span:nth-child(2) {
+              font-size: 12px;
+              color: #666;
+              display: block;
+            }
+          }
+          .right-img {
+            width: 100;
+            height: 100px;
+            text-align: center;
+            margin: 0 auto;
+            img {
+              max-height: 100px;
+              max-width: 100px;
+            }
+          }
+        }
+      }
+      > div:nth-child(n + 1) {
+        border-right: 1px solid #eee;
+      }
+    }
+  }
+
+  .head-recommend {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 50px;
+    padding: 0 10px;
+    background: #449dae;
+    color: #fff;
+    span:nth-child(1) {
+      font-size: 20px;
+    }
+    span:nth-child(2) {
+      font-size: 12px;
+    }
+  }
+}
+
+.modal-top-advert {
+  align-items: start;
+  padding: 0 30px;
+}
+</style>
\ No newline at end of file
diff --git a/seller/src/views/shop/modelList/seckill.vue b/seller/src/views/shop/modelList/seckill.vue
new file mode 100644
index 00000000..1c296efc
--- /dev/null
+++ b/seller/src/views/shop/modelList/seckill.vue
@@ -0,0 +1,291 @@
+<template>
+  <div class="seckill">
+    <div class="desc">秒杀商品需要在促销活动中添加商品，有商品时才会在首页展示</div>
+    <div class="aside">
+      <div class="title">{{ actName }}</div>
+      <div class="hour">
+        <span>{{ currHour }}:00</span>点场 倒计时
+      </div>
+      <div class="count-down" v-if="actStatus === 1">
+        <span>{{ hours }}</span
+        ><span>{{ minutes }}</span
+        ><span>{{ seconds }}</span>
+      </div>
+      <div class="act-status" v-else>
+        {{ actStatus == 0 ? "未开始" : "已结束" }}
+      </div>
+    </div>
+    <div class="section">
+      <swiper ref="mySwiper" :options="swiperOptions">
+        <swiper-slide
+          v-for="(item, index) in options.list[0].goodsList"
+          :key="index"
+        >
+          <div class="content">
+            <img :src="item.img" width="140" height="140" :alt="item.name" />
+            <div class="ellipsis">{{ item.name }}</div>
+            <div>
+              <span>{{ item.price | unitPrice("￥") }}</span>
+              <span>{{ item.originalPrice | unitPrice("￥") }}</span>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
+  </div>
+</template>
+<script>
+import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
+import "swiper/swiper-bundle.css";
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  directives: {
+    swiper: directive,
+  },
+  props: {
+    data: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      options: this.data.options, // 当前数据
+      actStatus: 0, // 0 未开始  1 进行中   2 已结束
+      actName: "限时秒杀",
+      currHour: "00", // 当前秒杀场
+      diffSeconds: 0, // 倒地时
+      hours: "00", // 小时
+      minutes: "00", // 分钟
+      seconds: "00", // 秒
+      interval: undefined, // 定时器
+      swiperOptions: {
+        // 轮播图参数
+        slidesPerView: 5,
+        autoplay: true,
+        loop: true,
+      },
+    };
+  },
+  watch: {
+    diffSeconds(val) {
+      const hours = Math.floor(val / 3600);
+      // 当前秒数 / 60，向下取整
+      // 获取到所有分钟数 3600 / 60 = 60分钟
+      // 对60取模，超过小时数的分钟数
+      const minutes = Math.floor(val / 60) % 60;
+      // 当前的秒数 % 60，获取到 超过小时数、分钟数的秒数（秒数）
+      const seconds = val % 60;
+      this.hours = hours < 10 ? "0" + hours : hours;
+      this.minutes = minutes < 10 ? "0" + minutes : minutes;
+      this.seconds = seconds < 10 ? "0" + seconds : seconds;
+
+      if (val === 0) {
+        clearInterval(this.interval);
+        this.hours = 0;
+        this.minutes = 0;
+        this.seconds = 0;
+        this.countDown(this.options.list);
+      }
+    },
+  },
+  mounted() {
+    this.countDown(this.options.list);
+  },
+  beforeDestroy() {
+    clearInterval(this.interval);
+  },
+  methods: {
+    // 倒计时
+    countDown(list) {
+      /**
+       * 默认倒计时两小时
+       * 如果没有开始，则显示未开始
+       * 进行中显示倒计时
+       * 今天的秒杀结束则显示已结束
+       */
+      let nowHour = new Date().getHours();
+      if (nowHour < Number(list[0].time)) {
+        // 活动未开始
+        this.currHour = list[0].time;
+        this.actStatus = 0;
+      } else if (nowHour >= Number(list[list.length - 1].time + 2)) {
+        // 活动已结束
+        this.actStatus = 2;
+        this.currHour = list[list.length - 1].time;
+      } else {
+        // 活动进行中
+        this.actStatus = 1;
+        for (let i = 0; i < list.length; i++) {
+          if (nowHour == Number(list[i].time)) {
+            this.currHour = list[i].time;
+          }
+          if (
+            nowHour > Number(list[i].time) &&
+            nowHour < Number(list[i].time + 2)
+          ) {
+            this.currHour = list[i].time;
+          }
+        }
+        // 当前0点时间戳
+        let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
+        // 活动倒计时
+        this.diffSeconds = Math.floor(
+          (zeroTime +
+            3600 * 1000 * (this.currHour + 2) -
+            new Date().getTime()) /
+            1000
+        );
+        const that = this;
+        this.interval = setInterval(() => {
+          this.diffSeconds--;
+        }, 1000);
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.seckill {
+  width: 100%;
+  height: 260px;
+  display: flex;
+  position: relative;
+  .desc{
+    position: absolute;
+    color: $theme_color;
+    left: 200px;
+    top: 5px;
+  }
+  .aside {
+    overflow: hidden;
+    width: 190px;
+    height: 100%;
+    color: #fff;
+    background-image: url("../../../assets/seckillBg.png");
+
+    .title {
+      width: 100%;
+      text-align: center;
+      font-size: 28px;
+      margin-top: 31px;
+    }
+
+    .hour {
+      margin-top: 90px;
+      text-align: center;
+      span {
+        font-size: 18px;
+      }
+    }
+
+    .count-down {
+      margin: 10px 0 0 30px;
+      > span {
+        position: relative;
+        float: left;
+        width: 30px;
+        height: 30px;
+        text-align: center;
+        background-color: #2f3430;
+        margin-right: 20px;
+        color: white;
+        font-size: 20px;
+        &::after {
+          content: ":";
+          display: block;
+          position: absolute;
+          right: -20px;
+          font-weight: bolder;
+          font-size: 18px;
+          width: 20px;
+          height: 100%;
+          top: 0;
+        }
+      }
+      > span:last-child::after {
+        content: "";
+      }
+    }
+
+    .act-status {
+      margin: 10px 0 0 65px;
+      font-size: 20px;
+    }
+  }
+
+  .section {
+    width: 1000px;
+    // background: #efefef;
+    .swiper-slide {
+      height: 260px;
+      .content {
+        width: 200px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        position: relative;
+        &::after {
+          content: "";
+          display: block;
+          position: absolute;
+          top: 50%;
+          right: 0;
+          width: 1px;
+          height: 200px;
+          transform: translateY(-50%);
+          background: linear-gradient(180deg, white, #eeeeee, white);
+        }
+        img {
+          margin-top: 30px;
+        }
+        > div {
+          width: 160px;
+          margin-top: 10px;
+          font-size: 12px;
+          position: relative;
+        }
+        > div:nth-of-type(1):hover {
+          color: $theme_color;
+          cursor: pointer;
+        }
+        > div:nth-of-type(2) {
+          border: 1px solid $theme_color;
+          line-height: 24px;
+          display: flex;
+          text-align: center;
+
+          span:nth-child(1) {
+            color: #fff;
+            font-size: 16px;
+            width: 92px;
+            background-color: $theme_color;
+            position: relative;
+            &::before {
+              content: " ";
+              width: 0;
+              height: 0;
+              border-color: transparent white transparent transparent;
+              border-style: solid;
+              border-width: 24px 8px 0 0;
+              position: absolute;
+              top: 0;
+              left: 84px;
+            }
+          }
+
+          span:nth-child(2) {
+            color: #999;
+            width: 66px;
+            text-decoration: line-through;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/seller/src/views/shop/modelList/setup-box.scss b/seller/src/views/shop/modelList/setup-box.scss
new file mode 100644
index 00000000..088778ca
--- /dev/null
+++ b/seller/src/views/shop/modelList/setup-box.scss
@@ -0,0 +1,62 @@
+.setup-content{
+    position: relative;
+    &:hover{
+        .setup-box{
+            display: block;
+        }
+    }
+}
+
+.setup-box{
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, .2);
+    z-index: 99;
+    width: 100%;
+    height: 100%;
+    .ivu-btn{
+        float: right;
+        margin-right: 5px;
+        margin-top: 5px;
+    }
+}
+
+.modal-tab-bar{
+    margin-left: 20px;
+    table{
+        margin-top: 10px;
+        display:inline-block;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        max-height: 400px !important;
+        overflow: hidden auto;
+    }
+    thead{
+        background-color: #eee;
+        th{
+            padding: 5px 0;
+        }
+    }
+    td{
+       padding: 10px;
+       text-align: center;
+    }
+    tbody>tr:hover{
+        background-color: aliceblue;
+    }
+}
+
+.modal-top-advert{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    >*{
+        margin-bottom: 10px;
+    }
+    .ivu-input-wrapper{
+        width: 200px;
+    }
+}
\ No newline at end of file
diff --git a/seller/src/views/shop/readme.md b/seller/src/views/shop/readme.md
new file mode 100644
index 00000000..1261bb78
--- /dev/null
+++ b/seller/src/views/shop/readme.md
@@ -0,0 +1,20 @@
+### 楼层装修页面
+
+#### floorList.vue  楼层列表
+
+#### renovation.vue 楼层装修主页面
+
+#### singleConfig.vue  右侧配置项
+
+#### modelForm.vue  中间展示所选模块
+
+#### modelFormItem.vue  单个模块样式
+
+#### modelConfig.js 模块数据
+
+#### modelList文件夹为添加的模块
+
+### wap文件夹为移动端楼层装修
+
+
+### draggable中文文档 (http://www.itxst.com/vue-draggable/tutorial.html)
\ No newline at end of file
diff --git a/seller/src/views/shop/renovation.vue b/seller/src/views/shop/renovation.vue
new file mode 100644
index 00000000..59a73f9e
--- /dev/null
+++ b/seller/src/views/shop/renovation.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="renovation">
+    <!-- 左侧模块列表 -->
+    <div class="model-list">
+      <div class="classification-title">基础模块</div>
+      <draggable tag="ul" :list="modelData" v-bind="{group:{ name:'model', pull:'clone',put:false},sort:false, ghostClass: 'ghost'}"   >
+        <li v-for="(model, index) in modelData" :key="index" class="model-item">
+          <Icon :type="model.icon" />
+          <span>{{model.name}}</span>
+        </li>
+      </draggable>
+    </div>
+    <!-- 中间展示模块 -->
+    <div class="show-content">
+      <model-form ref="modelForm" :data="modelForm"></model-form>
+    </div>
+    <!-- 操作按钮 -->
+    <div class="btn-bar">
+      <Button type="primary" :loading="submitLoading" @click="saveTemplate">保存模板</Button>
+      <Button class="ml_10" @click="resetTemplate">还原模板</Button>
+    </div>
+  </div>
+</template>
+<script>
+import { modelData } from "./modelConfig";
+import Draggable from "vuedraggable";
+import ModelForm from "./modelForm.vue";
+import * as API_floor from "@/api/other.js";
+export default {
+  components: {
+    Draggable,
+    ModelForm,
+  },
+  mounted() {
+    this.getTemplateItem(this.$route.query.id);
+  },
+  data() {
+    return {
+      modelData, // 可选模块数据
+      modelForm: { list: [] }, // 模板数据
+      submitLoading: false, // 提交加载状态
+    };
+  },
+  methods: {
+    saveTemplate() {
+      // 保存模板
+      this.submitTemplate(this.$route.query.pageShow ? 'OPEN' : 'CLOSE')
+    },
+    // 提交模板
+    submitTemplate(pageShow) {
+      this.submitLoading = true
+      const modelForm = JSON.parse(JSON.stringify(this.modelForm)) 
+      modelForm.list.unshift(this.$refs.modelForm.navList);
+      modelForm.list.unshift(this.$refs.modelForm.topAdvert);
+      const data = {
+        id: this.$route.query.id,
+        pageData: JSON.stringify(modelForm),
+        pageShow
+      };
+      API_floor.updateHome(this.$route.query.id, data).then((res) => {
+        this.submitLoading = false
+        if (res.success) {
+          this.$Message.success("保存模板成功");
+        }
+      });
+    },
+    resetTemplate() {
+      // 还原模板
+      this.getTemplateItem(this.$route.query.id);
+    },
+    getTemplateItem(id) {
+      // 获取模板数据
+      API_floor.getHomeData(id).then((res) => {
+        if (res.success) {
+          let pageData = res.result.pageData;
+          if (pageData) {
+            pageData = JSON.parse(pageData);
+            if (pageData.list[0].type === "topAdvert") {
+              // topAdvert 为顶部广告 navList为导航栏
+              this.$refs.modelForm.topAdvert = pageData.list[0];
+              this.$refs.modelForm.navList = pageData.list[1];
+              pageData.list.splice(0, 2);
+              this.modelForm = pageData;
+            } else {
+              this.modelForm = { list: [] };
+            }
+          } else {
+            this.modelForm = { list: [] };
+          }
+        }
+      });
+    },
+  },
+  watch: {
+    modelForm: {
+      deep: true,
+      handler: function (val) {
+        console.log(val);
+      },
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.renovation {
+  position: relative;
+  display: flex;
+}
+.model-list {
+  width: 120px;
+  height: auto;
+  padding: 10px;
+  background: #fff;
+  margin-top: 60px;
+  position: fixed;
+  z-index: 100;
+  box-shadow: 1px 1px 10px #999;
+  .classification-title {
+    width: 100%;
+    height: 30px;
+    line-height: 30px;
+  }
+  .model-item {
+    width: 100px;
+    height: 30px;
+    background: #eee;
+    margin-top: 10px;
+    line-height: 30px;
+    text-align: center;
+    color: #999;
+    &:hover {
+      border: 1px dashed #409eff;
+      color: #409eff;
+      cursor: move;
+    }
+  }
+  .ghost::after {
+    border: none;
+    height: 0;
+    content: "";
+  }
+}
+.show-content {
+  margin-left: 150px;
+  margin-top: 60px;
+}
+.ghost {
+  background: #fff;
+  height: 30px;
+  position: relative;
+  &::after {
+    content: "松开鼠标添加模块";
+    position: absolute;
+    background: #fff;
+    border: 1px dashed #409eff;
+    color: #409eff;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 50px;
+    text-align: center;
+    line-height: 50px;
+  }
+}
+.btn-bar {
+  position: fixed;
+  width: 100%;
+  background: #fff;
+  height: 50px;
+  padding: 10px;
+  box-shadow: 1px 1px 10px #999;
+  z-index: 99;
+  top: 100px;
+}
+</style>
diff --git a/seller/src/views/shop/shopSetting.vue b/seller/src/views/shop/shopSetting.vue
index 6c388e61..6d8c4b4e 100644
--- a/seller/src/views/shop/shopSetting.vue
+++ b/seller/src/views/shop/shopSetting.vue
@@ -47,6 +47,9 @@
                 style="width: 30%"
               ></Input>
             </FormItem>
+            <FormItem label="店铺简介" prop="content" class="wangEditor">
+              <i-switch v-model="form.pageShow" @on-change="pageShow"></i-switch>
+            </FormItem>
             <Form-item>
               <Button
                 @click="handleSubmit"
@@ -257,6 +260,7 @@ export default {
         storeAddressDetail: "", //详细地址
         storeAddressIdPath: "", //地址
         storeDesc: "", // 店铺描述
+        pageShow:false,
       },
 
       // 表单验证规则
@@ -331,6 +335,9 @@ export default {
         }
       });
     },
+    pageShow(type){
+      this.form.pageShow = type
+    },
     //修改售后地址
     regionClick() {
       this.showRegion = true;
diff --git a/seller/src/views/shop/wap/advertising.vue b/seller/src/views/shop/wap/advertising.vue
new file mode 100644
index 00000000..70257cc8
--- /dev/null
+++ b/seller/src/views/shop/wap/advertising.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="model-view">
+    <div class="model-view-content">
+      <div class="content">
+        <div class="wap-title">首页</div>
+        <div class="draggable">
+          <!-- 全屏 -->
+          <div class="full-shadow" v-if="type == 'full'">
+            <img :src="advertising[0].img" alt="" />
+          </div>
+
+        </div>
+      </div>
+    </div>
+    <div class="model-config">
+      <div class="decorate">
+        <div class="decorate-title">全屏广告</div>
+        <div class="decorate-list">
+          <div
+            class="decorate-item"
+            v-for="(item, index) in advertising"
+            :key="index"
+          >
+            <div class="decorate-item-title">
+              <div>设置</div>
+            </div>
+            <div class="decorate-item-box">
+              <!-- 选择照片 -->
+              <div class="decorate-view">
+                <div class="decorate-view-title">选择图片</div>
+                <div>
+                  <img class="show-image" :src="item.img" alt />
+                  <input
+                    type="file"
+                    class="hidden-input"
+                    @change="changeFile(item, index)"
+                    ref="files"
+                    :id="'files' + index"
+                  />
+                  <div class="tips">
+                    建议尺寸
+                    <span>{{ item.size }}</span>
+                  </div>
+                </div>
+                <div class="selectBtn">
+                  <Button
+                    size="small"
+                    @click="handleClickFile(item, index)"
+                    ghost
+                    type="primary"
+                    >选择照片</Button
+                  >
+                </div>
+              </div>
+
+              <!-- 选择连接 -->
+              <div class="decorate-view">
+                <div class="decorate-view-title">选择图片</div>
+                <div>
+                  <Button
+                    ghost
+                    type="primary"
+                    size="small"
+                    @click="clickLink(item)"
+                    >选择链接</Button
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- <Button type="primary" @click="addDecorate()" ghost>添加</Button> -->
+        <liliDialog ref="liliDialog" :types="linkType"></liliDialog>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+export default {
+  data() {
+    return {
+
+      type: "full", // 是否全屏
+
+      //全屏广告
+      advertising: [
+         {
+          img:
+            "https://st-gdx.dancf.com/gaodingx/0/uxms/design/20200903-182035-5e87.png?x-oss-process=image/resize,w_932/interlace,1,image/format,webp",
+          size: "750*1624",
+        },
+      ],
+
+      linkType: "", // 选择类型
+    };
+  },
+  methods: {
+    // 点击链接
+    clickLink(item) {
+      this.$refs.liliDialog.open('link')
+    },
+    //点击图片解析成base64
+    changeFile(item, index) {
+      const file = document.getElementById("files" + index).files[0];
+      if (file == void 0) return false;
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      this.$nextTick((res) => {
+        reader.onload = (e) => {
+          item.img = e.target.result;
+        };
+      });
+    },
+    // 点击选择照片
+    handleClickFile(item, index) {
+      document.getElementById("files" + index).click();
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "./style.scss";
+@import "./decorate.scss";
+.decorate-radio {
+  margin: 10px 0;
+}
+.window-shadow,
+.full-shadow {
+  display: flex;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  left: 0;
+  align-items: center;
+  justify-content: center;
+}
+.window-shadow {
+  > img {
+    width: 306px;
+    height: 418px;
+  }
+}
+.full-shadow {
+  > img {
+    width: 100%;
+    height: 100%;
+  }
+}
+.draggable {
+  position: relative;
+}
+
+.btn-item {
+  > img {
+    margin: 4px 0;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+  }
+}
+</style>
diff --git a/seller/src/views/shop/wap/alertAdvertising.vue b/seller/src/views/shop/wap/alertAdvertising.vue
new file mode 100644
index 00000000..cddee110
--- /dev/null
+++ b/seller/src/views/shop/wap/alertAdvertising.vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="model-view">
+    <div class="model-view-content">
+      <div class="content">
+        <div class="wap-title">首页</div>
+        <div class="draggable">
+          <!-- 弹窗广告 -->
+          <div class="window-shadow">
+            <img :src="advertising[0].img" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="model-config">
+      <div class="decorate">
+        <div class="decorate-title">弹窗广告</div>
+
+        <div class="decorate-list">
+          <div
+            class="decorate-item"
+            v-for="(item, index) in advertising"
+            :key="index"
+          >
+            <div class="decorate-item-title">
+              <div>设置</div>
+            </div>
+            <div class="decorate-item-box">
+              <!-- 选择照片 -->
+              <div class="decorate-view">
+                <div class="decorate-view-title">选择图片</div>
+                <div>
+                  <img class="show-image" :src="item.img" alt />
+                  <input
+                    type="file"
+                    class="hidden-input"
+                    @change="changeFile(item, index)"
+                    ref="files"
+                    :id="'files' + index"
+                  />
+                  <div class="tips">
+                    建议尺寸
+                    <span>{{ item.size }}</span>
+                  </div>
+                </div>
+                <div class="selectBtn">
+                  <Button
+                    size="small"
+                    @click="handleClickFile(item, index)"
+                    ghost
+                    type="primary"
+                    >选择照片</Button
+                  >
+                </div>
+              </div>
+
+              <!-- 选择连接 -->
+              <div class="decorate-view">
+                <div class="decorate-view-title">选择图片</div>
+                <div>
+                  <Button
+                    ghost
+                    type="primary"
+                    size="small"
+                    @click="clickLink(item)"
+                    >选择链接</Button
+                  >
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <liliDialog ref="liliDialog" :types="linkType"></liliDialog>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      type: "full", // 展示方式
+      //全屏广告
+      advertising: [
+        {
+          img:
+            "https://shopro-1253949872.file.myqcloud.com/uploads/20200704/9136ecddcddf6607184fab689207e7e3.png",
+          size: "612*836",
+        },
+      ],
+      linkType: "", // 选择类型
+    };
+  },
+  methods: {
+    // 点击链接
+    clickLink(item) {
+      this.$refs.liliDialog.open('link')
+    },
+    //点击图片解析成base64
+    changeFile(item, index) {
+      const file = document.getElementById("files" + index).files[0];
+      if (file == void 0) return false;
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      this.$nextTick((res) => {
+        reader.onload = (e) => {
+          item.img = e.target.result;
+        };
+      });
+    },
+    // 点击选择照片
+    handleClickFile(item, index) {
+      document.getElementById("files" + index).click();
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "./style.scss";
+@import "./decorate.scss";
+.decorate-radio {
+  margin: 10px 0;
+}
+.window-shadow,
+.full-shadow {
+  display: flex;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  left: 0;
+  align-items: center;
+  justify-content: center;
+}
+.window-shadow {
+  > img {
+    width: 306px;
+    height: 418px;
+  }
+}
+.full-shadow {
+  > img {
+    width: 100%;
+    height: 100%;
+  }
+}
+.draggable {
+  position: relative;
+}
+
+.btn-item {
+  > img {
+    margin: 4px 0;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+  }
+}
+</style>
diff --git a/seller/src/views/shop/wap/config.js b/seller/src/views/shop/wap/config.js
new file mode 100644
index 00000000..764a3e33
--- /dev/null
+++ b/seller/src/views/shop/wap/config.js
@@ -0,0 +1,570 @@
+import * as API_Other from "@/api/other";
+
+// 获取楼层装修信息
+export function initData(id) {
+  API_Other.getHomeData(id).then(res => {
+    homeData = res;
+  });
+}
+
+export let homeData = {};
+
+/**
+ * drawer:true   广告右侧打开抽屉中显示
+ * ad_drawer:true 活动魔方右侧显示
+ * notAdd: true 没有添加按钮
+ * notLink: true 没有连接功能
+ * notImg: true 没有选择图片功能
+ * close:true 右侧关闭按钮
+ */
+export const modelData = [
+  {
+    type: "carousel",
+    name: "图片轮播",
+    img: "md-image",
+    notTitle: false,
+    close: true,
+    options: {
+      list: [
+        {
+          img: "https://i.loli.net/2020/12/05/fKH4CwImpbuD5Xj.png",
+          url: "",
+          link: "",
+          size: "750*350"
+        },
+        {
+          img: "https://i.loli.net/2020/12/05/12kleCgrSLfKoQs.png",
+          url: "",
+          link: "",
+          size: "750*350"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/ZlzcCdnpejtN9gL.png",
+          url: "",
+          link: "",
+          size: "750*350"
+        }
+      ]
+    }
+  },
+  {
+    type: "leftOneRightTwo",
+    name: "左一右二",
+    notAdd: true,
+    drawer: true,
+    view: "tpl_ad_list",
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "335*335"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/kdB3AE9ay4c1SnN.png",
+          url: "",
+          link: "",
+          size: "335*177"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/FmDr9ksiXeEqYLU.png",
+          url: "",
+          link: "",
+          size: "335*177"
+        }
+      ]
+    }
+  },
+  {
+    type: "title",
+    name: "标题栏",
+    img: "md-image",
+    notAdd: true,
+    notLink: true,
+    notImg: true,
+    options: {
+      list: [
+        {
+          title: "标题",
+          color: "#000000"
+        }
+      ]
+    }
+  },
+  {
+    type: "leftTwoRightOne",
+    name: "左二右一",
+    notAdd: true,
+    drawer: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img: "https://i.loli.net/2021/05/14/kdB3AE9ay4c1SnN.png",
+          url: "",
+          link: "",
+          size: "335*177"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/FmDr9ksiXeEqYLU.png",
+          url: "",
+          link: "",
+          size: "335*177"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "335*335"
+        }
+      ]
+    }
+  },
+  {
+    type: "flexThree",
+    name: "三列单行",
+    drawer: true,
+    notAdd: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "226*226 (1:1)"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "226*226 (1:1)"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "226*226 (1:1)"
+        }
+      ]
+    }
+  },
+  {
+    type: "flexOne",
+    name: "一张大图",
+    drawer: true,
+    notAdd: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img: "https://i.loli.net/2020/12/05/8wSNWbnqujDh6HL.png",
+          url: "",
+          link: "",
+          size: "750*280"
+        }
+      ]
+    }
+  },
+  {
+    type: "flexTwo",
+    name: "两张横图",
+    drawer: true,
+    notAdd: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "335*220"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "335*220"
+        }
+      ]
+    }
+  },
+  {
+    type: "topOneBottomTwo",
+    name: "上一下二",
+    drawer: true,
+    notAdd: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "710*170"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "335*170"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "335*170"
+        }
+      ]
+    }
+  },
+  {
+    type: "topTwoBottomOne",
+    name: "上二下一",
+    drawer: true,
+    notAdd: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+
+          size: "335*170"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "335*170"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "710*170"
+        }
+      ]
+    }
+  },
+  {
+    type: "flexFive",
+    name: "五列单行",
+    drawer: true,
+    notAdd: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img: "https://picsum.photos/id/127/200/200",
+          url: "",
+          link: "",
+          size: "75*75（1:1）"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "75*75（1:1）"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "75*75（1:1）"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "75*75（1:1）"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "75*75（1:1）"
+        }
+      ]
+    }
+  },
+  {
+    type: "flexFour",
+    name: "四列单行",
+    drawer: true,
+    notAdd: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "88*88（1:1）"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "88*88（1:1）"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "88*88（1:1）"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          size: "88*88（1:1）"
+        }
+      ]
+    }
+  },
+  {
+    type: "textPicture",
+    name: "文字图片",
+    drawer: true,
+    notAdd: true,
+
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          title: "文字",
+          size: "88*88（1:1）"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          title: "文字",
+          size: "88*88（1:1）"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          title: "文字",
+          size: "88*88（1:1）"
+        },
+        {
+          img: "https://i.loli.net/2021/05/14/dtNvI5UxchXn8gz.png",
+          url: "",
+          link: "",
+          title: "文字",
+          size: "88*88（1:1）"
+        }
+      ]
+    }
+  },
+
+  {
+    type: "tpl_ad_list",
+    name: "广告魔方",
+    img: "md-image",
+    options: {
+      list: [
+        {
+          bg_img: "",
+          name: "",
+          url: ""
+        }
+      ]
+    }
+  },
+  {
+    type: "menu",
+    name: "宫格导航",
+    img: "md-image",
+    close: true,
+    options: {
+      list: [
+        {
+          img: "https://i.loli.net/2020/12/05/SoGAv7gYybuWzED.png",
+          url: "",
+          link: "",
+          title: "标题",
+          size: "88*88 (1:1)"
+        },
+        {
+          img: "https://i.loli.net/2020/12/05/JXR5K3sbIeENjqH.png",
+          url: "",
+          link: "",
+          title: "标题",
+          size: "88*88 (1:1)"
+        },
+        {
+          img: "https://i.loli.net/2020/12/05/KlZfnCFIdEV231Y.png",
+          url: "",
+          link: "",
+          title: "标题",
+          size: "88*88 (1:1)"
+        },
+        {
+          img: "https://i.loli.net/2020/12/05/GfmMyN2wrUVIlci.png",
+          url: "",
+          link: "",
+          title: "标题",
+          size: "88*88 (1:1)"
+        },
+        {
+          img: "https://i.loli.net/2020/12/05/eznDa3iNby5FkYL.png",
+          url: "",
+          link: "",
+          title: "标题",
+          size: "88*88 (1:1)"
+        }
+      ]
+    }
+  },
+  {
+    type: "search",
+    name: "搜索",
+    img: "md-image",
+    notAdd: true,
+    notLink: true,
+    notImg: true,
+    options: {
+      list: [
+        {
+          title: "搜索"
+        }
+      ]
+    }
+  },
+  {
+    type: "goods",
+    name: "商品分类",
+    img: "md-image",
+    notAdd: true,
+    notLink: true,
+    notImg: true,
+    options: {
+      list: [
+        {
+          /**
+           * 2021/12/9
+           * 新增索引（‘index’）判断商品归属分类
+           * 之前代码没有配置index也不会收到印象
+           * 新建的楼层将采用索引判断分类
+           */
+          titleWay: [
+            {
+              title: "精选",
+              desc: "电子推荐",
+              ___index:0,
+            },
+            {
+              title: "实惠",
+              desc: "便宜好货",
+              ___index:1,
+            },
+            {
+              title: "进口",
+              desc: "国际自营",
+              ___index:2,
+            },
+            {
+              title: "推荐",
+              desc: "喂奶推荐",
+              ___index:3,
+            }
+          ],
+          listWay: [
+            {
+              img: "https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
+              price: "120",
+              title:
+                " 微软 (Microsoft) Xbox 无线控制器/手柄 湛蓝色 | 3.5mm耳机接口蓝牙连接 Xbox主机电脑平板通用",
+              type: "精选",
+              ___index:0
+            },
+            {
+              img: "https://i.loli.net/2020/12/05/c9mptI5Pg8qJ6ny.png",
+              title:
+                "宏碁(acer) DP高清线1.2版 2K*4KDisplayPort公对公接线笔记本电脑显卡连接显示器视频线1.5米",
+              price: "190",
+              type: "精选",
+              ___index:0
+            },
+            
+          ]
+        }
+      ]
+    }
+  }
+  // TODO 第一版本隐藏暂无此功能
+  // {
+  //   notAdd: true,
+  //   notImg: true,
+  //   type: "joinGroup",
+  //   name: "拼团活动",
+  //   img: "md-image",
+  //   options: {
+  //     list: [
+  //       {
+  //         title: "测试拼团"
+  //       }
+  //     ]
+  //   }
+  // },
+  // {
+  //   notAdd: true,
+  //   notImg: true,
+  //   type: "integral",
+  //   name: "积分活动",
+  //   img: "md-image",
+  //   options: {
+  //     list: [
+  //       {
+  //         title: "测试积分"
+  //       }
+  //     ]
+  //   }
+  // },
+  // {
+  //   notAdd: true,
+  //   notImg: true,
+  //   type: "spike",
+  //   name: "秒杀活动",
+  //   img: "md-image",
+  //   options: {
+  //     list: [
+  //       {
+  //         title: "测试秒杀"
+  //       }
+  //     ]
+  //   }
+  // },
+  // {
+  //   notAdd: true,
+  //   notImg: true,
+  //   type: "group",
+  //   name: "团购活动",
+  //   img: "md-image",
+  //   options: {
+  //     list: [
+  //       {
+  //         title: "测试团购"
+  //       }
+  //     ]
+  //   }
+  // }
+];
diff --git a/seller/src/views/shop/wap/decorate.scss b/seller/src/views/shop/wap/decorate.scss
new file mode 100644
index 00000000..968e51f6
--- /dev/null
+++ b/seller/src/views/shop/wap/decorate.scss
@@ -0,0 +1,117 @@
+
+/deep/ .ivu-modal-mask,.ivu-modal-wrap{
+  z-index: 800;
+}
+.decorate-view-link{
+    font-size: 12px;
+    margin: 0 4px;
+    color: #999;
+}
+.decorate-view-style {
+    border: 1px solid #ededed;
+    background: #f7f7fa;
+    text-align: center;
+    width: 100%;
+    padding: 30px 0 0 0;
+    margin-bottom: 20px;
+    cursor: pointer;
+    > .select-style {
+      background: #ededed;
+      padding: 15px 0;
+      font-size: 15px;
+    }
+  }
+  .decorate-border {
+    border: 1px solid #ededed;
+    margin: 10px 0;
+    padding: 0 10px;
+  }
+  .drawer {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    > .drawer-item {
+      cursor: pointer;
+      border: 1px solid #ededed;
+      background: #f9f0ff;
+      width: 170px;
+      margin-right: 14px;
+      color: #9254de;
+      margin-bottom: 14px;
+      border-radius: 0.8em;
+      height: 60px;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      justify-content: center;
+    }
+  }
+  .hidden-input {
+    display: none;
+  }
+  .decorate {
+    padding: 0 20px;
+    height: calc(100vh - 120px);
+    overflow-y: auto;
+    padding-bottom: 120px;
+  }
+  .decorate-title {
+    height: 50px;
+    line-height: 50px;
+    font-weight: bold;
+  }
+  .decorate-list {
+    overflow: hidden;
+  }
+  .decorate-view {
+    display: flex;
+    margin: 20px 0;
+    align-items: center;
+  }
+  .decorate-item-box {
+    background: #fff;
+    padding: 10px;
+    border: 1px solid #ededed;
+  }
+  .decorate-item-title {
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    line-height: 40px;
+    padding: 0 10px;
+  }
+  .decorate-view-title {
+    margin-right: 10px;
+  }
+  .decorate-item {
+    background: #ededed;
+    border-top-left-radius: 0.4em;
+    margin-bottom: 20px;
+    border-top-right-radius: 0.4em;
+  }
+  .show-image {
+    max-width: 50px;
+  }
+  .tips {
+    font-size: 12px;
+    color: #999;
+    > span {
+      color: $theme_color;
+    }
+  }
+  .selectBtn {
+    margin-left: 10px;
+  }
+  .bing-goods-list {
+    display: flex;
+    > .bing-goods-item {
+      width: 50px;
+      height: 50px;
+      > img {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
+    }
+  }
diff --git a/seller/src/views/shop/wap/decorate.vue b/seller/src/views/shop/wap/decorate.vue
new file mode 100644
index 00000000..e880779d
--- /dev/null
+++ b/seller/src/views/shop/wap/decorate.vue
@@ -0,0 +1,304 @@
+<template>
+  <div class="decorate">
+    <div class="decorate-title">
+      {{ res.name }}
+      <Button
+        style="margin-left: 20px"
+        size="small"
+        ghost
+        v-if="res.type == 'tpl_ad_list' || res.type == 'tpl_activity_list' || res.drawer"
+        type="primary"
+        @click="selectStyle()"
+        >选择风格</Button
+      >
+    </div>
+
+    <!-- 右侧显示抽屉 -->
+    <Drawer title="选择风格" :closable="false" width="400" v-model="styleFlag">
+      <div class="drawer">
+        <div
+          class="drawer-item"
+          @click="clickDrawer(item, index)"
+          v-for="(item, index) in modelData"
+          :key="index"
+          v-if="item.drawer"
+        >
+          <img src alt />
+          <span>{{ item.name }}</span>
+        </div>
+      </div>
+    </Drawer>
+
+    <!-- 卡片集合 -->
+    <div
+      class="decorate-list"
+      v-if="(res.type != 'tpl_ad_list' && res.type != 'tpl_activity_list') || res.drawer"
+    >
+      <div class="decorate-item" v-for="(item, index) in res.options.list" :key="index">
+        <div class="decorate-item-title">
+          <div>卡片</div>
+          <Icon
+            @click="closeDecorate(index)"
+            v-if="res.close"
+            size="20"
+            color="#e1251b"
+            type="md-close-circle"
+          />
+        </div>
+
+        <div class="decorate-item-box">
+          <div
+            class="decorate-border"
+            v-if="item.titleWay"
+            v-for="(title_item, title_index) in item.titleWay"
+            :key="title_index"
+          >
+            <div class="decorate-view">
+              <div class="decorate-view-title">标题{{ title_index + 1 }}</div>
+              <div>
+                <Input v-model="title_item.title" />
+              </div>
+            </div>
+            <div class="decorate-view">
+              <div class="decorate-view-title">描述</div>
+              <div>
+                <Input v-model="title_item.desc" />
+              </div>
+            </div>
+            <div class="decorate-view">
+              <div class="decorate-view-title">绑定商品</div>
+              <div
+                class="decorate-view-link"
+                v-if="res.options.list[0].listWay.length != 0"
+              >
+                <!-- 绑定商品选择器回调已选择的商品 -->
+                <div
+                  v-if="
+                    title_item.___index == bindGoods.___index ||
+                    title_item.title == bindGoods.type
+                  "
+                  v-for="(bindGoods, bindGoodsIndex) in res.options.list[0].listWay"
+                  :key="bindGoodsIndex"
+                >
+                  {{ bindGoods.title }},
+                </div>
+              </div>
+              <div>
+                <Button @click="bindGoodsId(title_item)" size="small" ghost type="primary"
+                  >选择商品</Button
+                >
+              </div>
+            </div>
+          </div>
+          <!-- 选择照片 -->
+          <div class="decorate-view" v-if="!res.notImg">
+            <div class="decorate-view-title">选择照片</div>
+            <div>
+              <img class="show-image" :src="item.img" alt />
+
+              <div class="tips">
+                建议尺寸
+                <span>{{ item.size }}</span>
+              </div>
+            </div>
+            <div class="selectBtn">
+              <Button
+                size="small"
+                @click="handleClickFile(item, index)"
+                ghost
+                type="primary"
+                >选择照片</Button
+              >
+            </div>
+          </div>
+          <!-- 填写标题 -->
+          <div class="decorate-view" v-if="item.title != void 0 && !res.notTitle">
+            <div class="decorate-view-title">菜单标题</div>
+            <div>
+              <Input v-model="item.title" style="width: 200px" />
+            </div>
+          </div>
+          <!-- 填写链接 -->
+          <div class="decorate-view" v-if="!res.notLink">
+            <div class="decorate-view-title">选择链接</div>
+            <div v-if="item.url.length != 0" class="decorate-view-link">
+              已选链接：
+
+              <span>
+                {{
+                  ways.find((e) => {
+                    return item.url.___type == e.name;
+                  }).title
+                }}
+                -
+                <!-- 当选择完链接之后的商品名称 -->
+                <span v-if="item.url.___type == 'goods'"> {{ item.url.goodsName }}</span>
+                <!-- 当选择完链接之后的分类回调 -->
+                <span v-if="item.url.___type == 'category'"> {{ item.url.name }}</span>
+                <!-- 当选择完链接之后的店铺回调 -->
+                <span v-if="item.url.___type == 'shops'"> {{ item.url.memberName }}</span>
+                <!-- 当选择完链接之后的其他回调 -->
+                <span v-if="item.url.___type == 'other'"> {{ item.url.title }}</span>
+                <!-- 当选择完活动之后的其他回调 -->
+                <span v-if="item.url.___type == 'marketing'">
+                  <span v-if="item.url.___promotion == 'SECKILL'"> 秒杀 </span>
+                  <span v-if="item.url.___promotion == 'FULL_DISCOUNT'"> 满减 </span>
+                  <span v-if="item.url.___promotion == 'PINTUAN'"> 拼团 </span>
+                  {{ item.url.title || item.url.goodsName }}
+                </span>
+                <!-- 当选择完活动之后的其他回调 -->
+                <span v-if="item.url.___type == 'pages'"> {{ item.url.title }}</span>
+              </span>
+            </div>
+            <div>
+              <Button ghost size="small" type="primary" @click="clickLink(item, index)"
+                >选择链接</Button
+              >
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    <Button
+      v-if="res.type != 'tpl_ad_list' && res.type != 'tpl_activity_list' && !res.notAdd"
+      type="primary"
+      @click="addDecorate()"
+      ghost
+      >添加</Button
+    >
+
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+
+    <Modal width="1200px" v-model="picModelFlag">
+      <ossManage @callback="callbackSelected" ref="ossManage" />
+    </Modal>
+  </div>
+</template>
+<script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+import { modelData } from "./config";
+import ways from "@/views/lili-dialog/wap.js"; // 选择链接的类型
+export default {
+  components: {
+    ossManage,
+  },
+  data() {
+    return {
+      ways, // 选择链接的类型
+      picModelFlag: false, //图片选择器
+      linkType: "goods", // dialog弹窗口类型
+      styleFlag: false, //广告魔方开关
+      selectedLinkIndex: "", //选择链接的索引
+      modelData, // 装修数据
+      selectedGoods: "", // 已选商品
+      selectedLinks: "", // 已选链接
+      modelList: "", // 装修列表
+    };
+  },
+  watch: {
+    res: {
+      handler: (val) => {},
+      deep: true,
+    },
+  },
+  props: ["res"],
+  methods: {
+    // 选择风格
+    selectStyle() {
+      this.styleFlag = !this.styleFlag;
+    },
+    // 回调选择的链接
+    selectedLink(val) {
+      this.selectedLinks.url = val;
+    },
+    // 回调的商品信息
+    selectedGoodsData(val) {
+      if (!val) return false;
+      let data = val.map((item) => {
+        delete item.selected;
+        delete item.intro;
+        delete item.mobileIntro;
+        return {
+          img: item.thumbnail,
+          title: item.goodsName,
+          type: this.selectedGoods.title,
+          ___index: this.selectedGoods.___index,
+          ...item,
+        };
+      });
+      this.res.options.list[0].listWay.push(...data);
+      this.linkType = "";
+    },
+    // 绑定商品
+    bindGoodsId(val) {
+      this.selectedGoods = val;
+      this.liliDialogFlag(true);
+    },
+    // 点击抽屉
+    clickDrawer(item, index) {
+      this.$emit("handleDrawer", item);
+      this.styleFlag = false;
+    },
+    // 打开图片选择器
+    liliDialogFlag(flag) {
+      this.$refs.liliDialog.goodsFlag = flag;
+      this.$refs.liliDialog.flag = true;
+    },
+
+    // 点击链接赋值一个唯一值，并将当前选择的模块赋值
+    clickLink(val, index) {
+      this.selectedLinks = val;
+      this.liliDialogFlag(false);
+    },
+    //点击图片解析成base64
+    changeFile(item, index) {
+      const file = document.getElementById("files" + index).files[0];
+      if (file == void 0) return false;
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      this.$nextTick((res) => {
+        reader.onload = (e) => {
+          item.img = e.target.result;
+        };
+      });
+    },
+    //添加设置
+    addDecorate() {
+      let way = {
+        img: "https://picsum.photos/id/264/200/200",
+        title: "标题",
+        link: "",
+        url: "",
+        size: this.res.options.list[0]?.size,
+      };
+      this.res.options.list.push(way);
+    },
+    // 图片选择器回显
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.selectedGoods.img = val.url;
+    },
+    // 点击选择图片
+    handleClickFile(item, index) {
+      // this.$refs.ossManage.selectImage = true;
+      this.selectedGoods = item;
+      this.picModelFlag = true;
+    },
+    // 关闭
+    closeDecorate(index) {
+      this.$nextTick(() => {
+        this.res.options.list.splice(index, 1);
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "./decorate.scss";
+</style>
diff --git a/seller/src/views/shop/wap/index.js b/seller/src/views/shop/wap/index.js
new file mode 100644
index 00000000..37aa9768
--- /dev/null
+++ b/seller/src/views/shop/wap/index.js
@@ -0,0 +1,17 @@
+import index from './index.vue' //首页
+
+import advertising from './advertising.vue' //全屏活动
+import alertAdvertising from './alertAdvertising.vue' //弹窗活动
+
+
+
+const templates = {
+	index,
+
+	advertising,
+	alertAdvertising
+}
+
+
+
+export default  templates
diff --git a/seller/src/views/shop/wap/index.vue b/seller/src/views/shop/wap/index.vue
new file mode 100644
index 00000000..b0f82171
--- /dev/null
+++ b/seller/src/views/shop/wap/index.vue
@@ -0,0 +1,213 @@
+<template>
+  <div class="wrapper">
+    <!-- 拖拽栏 ，展示栏  -->
+    <div class="model-view">
+      <div class="model-view-menu">
+        <draggable
+          class="model-view-menu-item"
+          :list="modelData"
+          :move="handleMove"
+          v-bind="{
+            group: { name: 'model', pull: 'clone', put: false, animation: 150 },
+            sort: false,
+            ghostClass: 'ghost',
+          }"
+        >
+          <li
+            v-for="(model, index) in modelData"
+            v-if="!model.drawer"
+            :key="index"
+            class="model-item"
+          >
+            <img src alt />
+            <span>{{ model.name }}</span>
+          </li>
+        </draggable>
+      </div>
+
+      <div class="model-view-content">
+        <div class="content">
+          <div class="wap-title">首页</div>
+          <draggable
+            class="draggable"
+            group="model"
+            ghostClass="ghost"
+            @add="handleContentlAdd"
+            @end="handleContentlEnd"
+            v-model="contentData.list"
+          >
+            <div
+              class="list"
+              v-for="(element, index) in contentData.list"
+              :key="element.key"
+            >
+              <component
+                class="component"
+                :class="{ active: selected == index }"
+                @click.native="handleComponent(element, index)"
+                :is="templates[element.type]"
+                :res="element.options"
+              ></component>
+              <Icon
+                v-if="selected == index"
+                @click="closeComponent(index)"
+                color="#e1251b"
+                size="25"
+                class="close"
+                type="ios-close-circle"
+              />
+            </div>
+          </draggable>
+        </div>
+      </div>
+
+      <!-- 右侧栏 -->
+      <div class="model-config">
+        <decorate
+          @handleDrawer="handleDrawer"
+          v-if="decorateData"
+          :res="decorateData"
+        ></decorate>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import templates from "./template/index";
+import Draggable from "vuedraggable";
+import { modelData } from "./config";
+import decorate from "./decorate";
+import * as API_Other from '@/api/other'
+export default {
+  components: {
+    Draggable,
+    decorate,
+  },
+  data() {
+    return {
+      templates, // 模板类型
+      modelData, // 装修模型
+      qrcode: "", // 二维码
+      selected: 0, // 已选下标
+      contentData: { // 总数据
+        list: [],
+      },
+      decorateData: "", // 装修数据
+    };
+  },
+  watch: {
+    contentData: {
+      handler(val) {
+        this.$store.state.styleStore = val;
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.init();
+  },
+
+  methods: {
+
+    enableBindGoodsShow(){
+
+    },
+
+
+    // 初始化数据
+    init() {
+      if (!this.$route.query.id) return false;
+      API_Other.getHomeData(this.$route.query.id).then(res=>{
+        this.contentData = JSON.parse(res.result.pageData)
+
+
+         this.handleComponent( this.contentData.list[0], 0)
+      })
+    },
+
+    // 中间组件拖动，右侧数据绑定不变
+    handleContentlEnd(evt) {
+      const { newIndex } = evt;
+      this.handleComponent(this.contentData.list[newIndex], newIndex);
+    },
+
+    // 关闭楼层装修
+    closeComponent(index) {
+      this.$nextTick(() => {
+        this.decorateData = "";
+
+        console.log(this.contentData.list.length);
+        // 如果当前楼层不为一
+        if (this.contentData.list.length > 1) {
+          // 如果当前最底层 给下一层赋值
+
+          if (index - 1 == -1) {
+            this.handleComponent(this.contentData.list[index], index);
+          } else {
+            // 如果不是最底层给上一层赋值
+            this.handleComponent(this.contentData.list[index - 1], index - 1);
+          }
+          this.contentData.list.splice(index, 1);
+        } else {
+          this.contentData.list.splice(index, 1);
+        }
+      });
+    },
+
+    // 点击楼层装修
+    handleComponent(val, index) {
+      console.warn(val)
+      this.selected = index;
+      this.$set(this, "decorateData", val);
+    },
+    // 右侧栏回调
+    handleDrawer(val) {
+    
+      let newIndex = this.selected;
+
+      this.decorateData = "";
+
+      this.$set(this.contentData.list, newIndex, {
+        ...val,
+        options: {
+          ...val.options,
+        },
+
+        // 绑定键值
+        model: val.type,
+      });
+      this.contentData.list = JSON.parse(JSON.stringify(this.contentData.list));
+
+      this.$set(this, "decorateData", this.contentData.list[newIndex]);
+    },
+
+    // 封装拖拽参数
+    package(val, newIndex) {
+      this.contentData.list[newIndex] = "";
+      val = JSON.parse(JSON.stringify(val));
+      this.$set(this.contentData.list, newIndex, {
+        ...val,
+        options: {
+          ...val.options,
+        },
+
+        // 绑定键值
+        model: val.type,
+      });
+    },
+    // 拖动
+    handleContentlAdd(evt) {
+      const { newIndex } = evt;
+
+      this.package(this.contentData.list[newIndex], newIndex);
+      this.handleComponent(this.contentData.list[newIndex], newIndex);
+    },
+    handleMove() {
+      return true;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "./style.scss";
+</style>
diff --git a/seller/src/views/shop/wap/main.vue b/seller/src/views/shop/wap/main.vue
new file mode 100644
index 00000000..62bd675e
--- /dev/null
+++ b/seller/src/views/shop/wap/main.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="box">
+    <!-- 顶部栏 -->
+    <navbar @selected="selected" />
+
+    <component :is="layout[name]"></component>
+  </div>
+</template>
+<script>
+import layout from "./index";
+import navbar from "./navbar";
+export default {
+  components: {
+    navbar,
+  },
+  data() {
+    return {
+      layout, // 装修模块
+      name: "index", // 装修的页面
+    };
+  },
+  methods: {
+    selected(val) { // 顶部栏点击切换
+      this.name = val;
+    }
+  }
+};
+</script>
+<style scoped lang="scss">
+.box {
+  height: calc(100vh - 120px);
+  width: 98%;
+  margin: 0 auto;
+  padding: 0 20px;
+  background: #fff;
+  border-radius: 0.4em;
+  overflow: hidden;
+}
+</style>
diff --git a/seller/src/views/shop/wap/navbar.vue b/seller/src/views/shop/wap/navbar.vue
new file mode 100644
index 00000000..f8df0c32
--- /dev/null
+++ b/seller/src/views/shop/wap/navbar.vue
@@ -0,0 +1,214 @@
+<template>
+  <!-- 预览保存 -->
+  <div class="model-title">
+    <div>店铺装修</div>
+    <div class="btns">
+      <Button
+        @click="clickBtn(item)"
+        size="small"
+        v-for="(item, index) in way"
+        :key="index"
+        :type="item.selected ? 'primary' : ''"
+      >
+        {{ item.title }}
+      </Button>
+    </div>
+    <div class="model-title-view-btn">
+      <!-- TODO 后期会补全 目前版本暂无 -->
+      <!-- <Poptip placement="bottom" width="100">
+        <Button size="default" @click="creatQrCode">预览模板</Button>
+        <div slot="content" class="default-view-content">
+          <div>临时预览</div>
+          <div ref="qrCodeUrl"></div>
+        </div>
+      </Poptip> -->
+      <Button size="default" type="primary" @click="handleSpinShow">保存模板</Button>
+
+      <Modal
+        title="保存中"
+        v-model="saveDialog"
+        :closable="true"
+        :mask-closable="false"
+        :footer-hide="true"
+      >
+        <div v-if="progress">
+          <div class="model-item">
+            模板名称 <Input style="width: 200px" v-model="submitWay.name" />
+          </div>
+          <div class="model-item">
+            是否立即发布
+            <i-switch v-model="submitWay.pageShow">
+              <span slot="open">开</span>
+              <span slot="close">关</span>
+            </i-switch>
+          </div>
+
+          <Button type="primary" @click="save()">保存</Button>
+        </div>
+        <Progress v-else :percent="num" status="active" />
+      </Modal>
+    </div>
+  </div>
+</template>
+<script>
+import * as API_Other from "@/api/other.js";
+
+export default {
+  data() {
+    return {
+      progress: true, // 展示进度
+      num: 20, // 提交进度
+      saveDialog: false, // 加载状态
+      way: [
+        // 装修tab栏切换
+        {
+          title: "首页",
+          name: "index",
+          selected: true,
+        },
+        // {
+        //   title: "全屏广告",
+        //   name: "advertising",
+        //   selected: false,
+        // },
+        // {
+        //   title: "弹窗广告",
+        //   name: "alertAdvertising",
+        //   selected: false,
+        // },
+      ],
+
+      submitWay: {
+        // 表单信息
+        pageShow: this.$route.query.type || false,
+        name: this.$route.query.name || "模板名称",
+        pageClientType: "H5",
+      },
+    };
+  },
+  watch: {},
+  mounted() {},
+  methods: {
+    clickBtn(val) {
+      this.way.forEach((item, index) => {
+        item.selected = false;
+      });
+      val.selected = true;
+      this.$emit("selected", val.name);
+    },
+
+    /**
+     * 加载，并保存模板
+     */
+    handleSpinShow() {
+      this.saveDialog = true;
+    },
+
+    // 填写是否发布，模板名称之后保存
+    save() {
+      if (this.$store.state.styleStore == void 0) {
+        this.$Message.error("请装修楼层");
+        return false;
+      }
+
+      this.submitWay?.pageShow === true
+        ? (this.submitWay.pageShow = "OPEN")
+        : (this.submitWay.pageShow = "CLOSE");
+
+      this.submitWay.pageData = JSON.stringify(this.$store.state.styleStore);
+      this.submitWay.pageType = "INDEX";
+
+      this.$route.query.id ? this.update() : this.submit(this.submitWay);
+    },
+
+    // 更新
+    update() {
+      this.progress = false;
+      API_Other.updateHome(this.$route.query.id, {
+        pageData: JSON.stringify(this.$store.state.styleStore),
+        name: this.submitWay.name,
+        pageShow: this.submitWay.pageShow,
+        pageType: "INDEX",
+        pageClientType: "H5",
+      })
+        .then((res) => {
+          this.num = 50;
+          if (res.success) {
+            this.num = 80;
+            /**制作保存成功动画¸ */
+            setTimeout(() => {
+              this.saveDialog = false;
+              this.$Message.success("修改成功");
+              this.goback();
+            }, 1000);
+          } else {
+            this.saveDialog = false;
+            this.$Message.error("修改失败，请稍后重试");
+          }
+          console.log(res);
+        })
+        .catch((error) => {});
+    },
+
+    // 返回查询数据页面
+    goback() {
+      this.$router.push({
+        path: "/shop/wapList",
+      });
+    },
+
+    // 保存
+    submit(submitWay) {
+      this.progress = false;
+      API_Other.setHomeSetup(submitWay)
+        .then((res) => {
+          this.num = 50;
+          if (res.success) {
+            this.num = 80;
+            /**制作保存成功动画¸ */
+            setTimeout(() => {
+              this.saveDialog = false;
+              this.$Message.success("保存成功");
+              this.goback();
+            }, 1000);
+          } else {
+            this.progress = true;
+            this.saveDialog = false;
+            this.$Message.error("保存失败，请稍后重试");
+          }
+          console.log(res);
+        })
+        .catch((error) => {});
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.model-item {
+  width: 100%;
+  padding: 10px 0;
+  display: flex;
+  align-items: center;
+  > * {
+    margin: 0 8px;
+  }
+}
+.model-title {
+  height: 70px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #333;
+  font-size: 14px;
+  > .model-title-view-btn {
+    > * {
+      margin: 0 10px;
+    }
+  }
+}
+.btns {
+  * {
+    margin: 0 4px;
+  }
+}
+</style>
diff --git a/seller/src/views/shop/wap/style.scss b/seller/src/views/shop/wap/style.scss
new file mode 100644
index 00000000..3009bbad
--- /dev/null
+++ b/seller/src/views/shop/wap/style.scss
@@ -0,0 +1,98 @@
+.model-view {
+  display: flex;
+  .model-view-menu {
+    flex: 1.5;
+    min-width: 250px;
+    > .model-view-menu-item {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+    }
+  }
+  .model-config {
+    flex: 2.5;
+  }
+  .model-view-content {
+    flex: 6;
+  }
+  .model-item {
+    line-height: 1.75;
+    font-size: 13px;
+    margin: 0 5px 10px 5px;
+    border: 1px solid #ededed;
+    background: #f6f6f9;
+    width: 70px;
+    height: 70px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+  }
+}
+.model-view-content {
+  background: #f6f6f9;
+  border-radius: 0.8em;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-direction: column;
+}
+.wap-title {
+  line-height: 44px;
+  text-align: center;
+  height: 44px;
+  border-bottom: 1px solid #ededed;
+}
+.content {
+  margin: 20px 0;
+  padding: 50px 13px;
+  width: 360px;
+  background: url("../../../assets/iPhoneX_model.png") no-repeat;
+  height: 780px;
+  background-size: 360px;
+  overflow: hidden;
+  > .component,
+  .draggable {
+    height: 590px;
+    overflow-y: auto;
+    background: #ebebeb;
+  }
+  > .draggable {
+    padding-bottom: 100px;
+  }
+}
+.list {
+  position: relative;
+}
+.close {
+  position: absolute;
+  right: 5px;
+  top: 10px;
+  z-index: 99;
+}
+
+.model-btn {
+  > * {
+    margin: 0 4px;
+  }
+}
+.qrCode {
+  width: 100px;
+  height: 100px;
+}
+.default-view-content {
+  text-align: center;
+  font-weight: bold;
+  line-height: 2;
+  /deep/ img {
+    margin: 0 auto;
+  }
+}
+.model-config {
+  overflow-y: auto;
+}
+
+.active {
+  box-sizing: border-box;
+  border: 1px solid $theme_color;
+}
diff --git a/seller/src/views/shop/wap/template/advertising.scss b/seller/src/views/shop/wap/template/advertising.scss
new file mode 100644
index 00000000..be5228c9
--- /dev/null
+++ b/seller/src/views/shop/wap/template/advertising.scss
@@ -0,0 +1,57 @@
+.position-box{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
+.join-box {
+    display: flex;
+  }
+  .item-price {
+    > span {
+      font-size: 15px;
+      font-weight: 500;
+      color: #e1212b;
+    }
+  }
+  .join-item {
+    flex: 1;
+  }
+  .item-img {
+    width: 75px;
+    height: 75px;
+    margin: 0 auto;
+    display: block;
+  }
+  .item-img-box {
+    position: relative;
+  }
+  .item-line-through {
+    > span {
+      font-size: 10px;
+      font-weight: 400;
+      text-decoration: line-through;
+      color: #999;
+    }
+  }
+  .item-position-tips {
+    position: absolute;
+    right: 0;
+    color: #fff;
+    font-size: 12px;
+    bottom: 0;
+  }
+  .join-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #fff;
+    height: 50px;
+    > div:nth-of-type(1) {
+      font-size: 16px;
+      font-weight: bold;
+    }
+    > div:nth-of-type(2) {
+      font-size: 12px;
+      color: #999;
+    }
+  }
\ No newline at end of file
diff --git a/seller/src/views/shop/wap/template/index.js b/seller/src/views/shop/wap/template/index.js
new file mode 100644
index 00000000..5f4bca34
--- /dev/null
+++ b/seller/src/views/shop/wap/template/index.js
@@ -0,0 +1,44 @@
+import tpl_banner from "./tpl_banner";
+import tpl_title from "./tpl_title";
+import tpl_left_one_right_two from "./tpl_left_one_right_two";
+import tpl_left_two_right_one from "./tpl_left_two_right_one";
+import tpl_top_one_bottom_two from "./tpl_top_one_bottom_two";
+import tpl_top_two_bottom_one from "./tpl_top_two_bottom_one";
+import tpl_flex_one from "./tpl_flex_one";
+import tpl_flex_two from "./tpl_flex_two";
+import tpl_flex_three from "./tpl_flex_three";
+import tpl_flex_five from "./tpl_flex_five";
+import tpl_flex_four from "./tpl_flex_four";
+import tpl_text_picture from "./tpl_text_picture";
+import tpl_menu from "./tpl_menu";
+import tpl_search from "./tpl_search";
+import tpl_join_group from "./tpl_join_group";
+import tpl_integral from "./tpl_integral";
+import tpl_spike from "./tpl_spike";
+import tpl_group from "./tpl_group";
+import tpl_ad_list from "./tpl_view_list";
+import tpl_activity_list from './tpl_view_list'
+import tpl_goods from "./tpl_goods";
+export default {
+  carousel: tpl_banner,
+  title: tpl_title,
+  leftOneRightTwo: tpl_left_one_right_two,
+  leftTwoRightOne: tpl_left_two_right_one,
+  topOneBottomTwo:tpl_top_one_bottom_two,
+  topTwoBottomOne:tpl_top_two_bottom_one,
+  flexThree: tpl_flex_three,
+  flexFive: tpl_flex_five,
+  flexFour: tpl_flex_four,
+  flexTwo: tpl_flex_two,
+  textPicture: tpl_text_picture,
+  menu: tpl_menu,
+  search: tpl_search,
+  joinGroup: tpl_join_group,
+  flexOne: tpl_flex_one,
+  goods: tpl_goods,
+  integral:tpl_integral,
+  spike:tpl_spike,
+  group:tpl_group,
+  tpl_ad_list,
+  tpl_activity_list
+};
diff --git a/seller/src/views/shop/wap/template/tpl.scss b/seller/src/views/shop/wap/template/tpl.scss
new file mode 100644
index 00000000..638dd1cc
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl.scss
@@ -0,0 +1,31 @@
+.image-mode {
+    width: 100%;
+    height: 100%;
+    display: block;
+    padding: 1px;
+}
+.layout {
+    padding: 8px;
+    margin: 4px 0;
+    background: #fff;
+}
+.layout,
+.view-height-75,
+.view-height-150 {
+    overflow: hidden;
+}
+.view-width-100{
+    width: 100%;
+}
+.view-height-75 {
+    height: 75px;
+}
+.view-height-150 {
+    height: 150px;
+    flex: 1;
+}
+
+.view-height-85 {
+    height: 85px;
+    flex: 1;
+}
diff --git a/seller/src/views/shop/wap/template/tpl_banner.vue b/seller/src/views/shop/wap/template/tpl_banner.vue
new file mode 100644
index 00000000..e45bd27a
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_banner.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="layout">
+    <Carousel class="carousel" v-if="res"  autoplay :autoplay-speed="5000">
+      <CarouselItem v-for="(item, index) in res.list" :key="index">
+        <div>
+          <img class="image-mode" :src="item.img" />
+        </div>
+      </CarouselItem>
+    </Carousel>
+  </div>
+</template>
+<script>
+export default {
+  title: "导航栏",
+  props: ["res"],
+  watch: {
+    res: {
+      handler(newValue, oldValue) {
+          this.$set(this,'res',newValue);
+      },
+      deep: true
+    }
+  }
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.carousel,
+.image-mode {
+  height: 150px;
+}
+</style>
\ No newline at end of file
diff --git a/seller/src/views/shop/wap/template/tpl_flex_five.vue b/seller/src/views/shop/wap/template/tpl_flex_five.vue
new file mode 100644
index 00000000..eba7ea0c
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_flex_five.vue
@@ -0,0 +1,30 @@
+
+<template>
+  <div class="layout">
+    <img class="image-mode" :src="res.list[0].img" alt="">
+    <img class="image-mode" :src="res.list[1].img" alt="">
+    <img class="image-mode" :src="res.list[2].img" alt="">
+    <img class="image-mode" :src="res.list[3].img" alt="">
+    <img class="image-mode" :src="res.list[4].img" alt="">
+  </div>
+</template>
+
+<script>
+export default {
+  title: "五列单行图片模块",
+  props: ["res"],
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.layout {
+  background: #e8e8e8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+}
+img {
+  width: 67px !important;
+}
+</style>
diff --git a/seller/src/views/shop/wap/template/tpl_flex_four.vue b/seller/src/views/shop/wap/template/tpl_flex_four.vue
new file mode 100644
index 00000000..e31dc7e2
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_flex_four.vue
@@ -0,0 +1,33 @@
+
+<template>
+  <div class="layout">
+      <img class="image-mode" :src="res.list[0].img" alt="">
+      <img class="image-mode" :src="res.list[1].img" alt="">
+      <img class="image-mode" :src="res.list[2].img" alt="">
+      <img class="image-mode" :src="res.list[3].img" alt="">
+  </div>
+</template>
+
+<script>
+export default {
+  title: "四列单行图片模块",
+  props: ["res"],
+
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.layout {
+  // background: #e8e8e8;
+  // height: 84px;
+  display: flex;
+  padding: 0 8px;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+}
+
+img{
+  width: 84px !important;
+}
+</style>
diff --git a/seller/src/views/shop/wap/template/tpl_flex_one.vue b/seller/src/views/shop/wap/template/tpl_flex_one.vue
new file mode 100644
index 00000000..87a23274
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_flex_one.vue
@@ -0,0 +1,25 @@
+<template>
+    <div class="layout">
+        <div class="flex-one">
+            <img :src="res.list[0].img" alt="">
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: ['res']
+}
+</script>
+<style lang="scss" scoped>
+@import './tpl.scss';
+.flex-one{
+    width: 100%;
+    display: block;
+    height: 110px;
+    overflow: hidden;
+    >img{
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/seller/src/views/shop/wap/template/tpl_flex_three.vue b/seller/src/views/shop/wap/template/tpl_flex_three.vue
new file mode 100644
index 00000000..f6e8744f
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_flex_three.vue
@@ -0,0 +1,29 @@
+
+<template>
+  <div class="layout">
+      <img class="image-mode" :src="res.list[0].img" alt="">
+      <img class="image-mode" :src="res.list[1].img" alt="">
+      <img class="image-mode" :src="res.list[2].img" alt="">
+  </div>
+</template>
+
+<script>
+export default {
+  title: "三列单行图片模块",
+  props: ["res"],
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.layout {
+   background: #e8e8e8;
+  height: 110px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+}
+img{
+   width: 111px !important;
+}
+</style>
diff --git a/seller/src/views/shop/wap/template/tpl_flex_two.vue b/seller/src/views/shop/wap/template/tpl_flex_two.vue
new file mode 100644
index 00000000..5cb0ae6b
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_flex_two.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="layout">
+    <div class="flex-two">
+      <div class="flex-item">
+        <img :src="res.list[0].img" alt />
+      </div>
+      <div class="flex-item">
+        <img :src="res.list[1].img" alt />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  title: "两张横图",
+  props: ["res"],
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.flex-two {
+  width: 100%;
+  display: flex;
+  height: 110px;
+  overflow: hidden;
+}
+.flex-item {
+  width: 50%;
+  > img {
+    display: block;
+    max-width: 100%;
+    height: 100%;
+  }
+}
+</style>
diff --git a/seller/src/views/shop/wap/template/tpl_goods.vue b/seller/src/views/shop/wap/template/tpl_goods.vue
new file mode 100644
index 00000000..1bb3566f
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_goods.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="layout">
+    <div class="goods-cell-title">
+      <div
+        class="goods-item-title"
+        :class="{ selected: selected.index == index }"
+        @click="handleClickTitle(title, index)"
+        v-for="(title, index) in res.list[0].titleWay"
+        :key="index"
+      >
+        <h4>{{ title.title }}</h4>
+        <div>{{ title.desc }}</div>
+      </div>
+    </div>
+    <div class="goods-list">
+      <div
+        v-if="
+          item.___index != undefined
+            ? selected.index == item.___index
+            : selected.val == item.type
+        "
+        class="goods-item"
+        v-for="(item, item_index) in res.list[0].listWay"
+        :key="item_index"
+      >
+        <div class="goods-img">
+          <Icon
+            size="20"
+            color="#e1251b"
+            @click="closeGoods(item, item_index)"
+            class="goods-icon"
+            type="ios-close-circle"
+          />
+          <img :src="item.img" alt />
+        </div>
+        <div class="goods-desc">
+          <div class="goods-title">
+            {{ item.title }}
+          </div>
+          <div class="goods-bottom">
+            <div class="goods-price">￥{{ item.price | unitPrice }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      selected: {
+        // 已选数据
+        index: 0,
+      },
+    };
+  },
+  props: ["res"],
+  watch: {
+    res: {
+      handler(val) {
+        // 监听父级的值 如果有值将值赋给selected
+        if (val) {
+          this.selected.val = this.res.list[0].listWay[0].type;
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    // 删除商品
+    closeGoods(val, index) {
+      this.res.list[0].listWay.splice(index, 1);
+    },
+    // 切换商品列表
+    handleClickTitle(val, index) {
+      this.selected.index = index;
+      this.selected.val = val.title;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.layout {
+  padding: 8px 0;
+  background: #e8e8e8;
+}
+.selected {
+  > h4 {
+    color: #000 !important;
+  }
+  > div {
+    font-weight: bold;
+    color: $theme_color !important;
+  }
+}
+.goods-cell-title {
+  padding: 10px;
+  transition: 0.35s;
+  display: flex;
+  cursor: pointer;
+  > .goods-item-title {
+    flex: 1;
+    text-align: center;
+    > h4 {
+      font-size: 16px;
+      color: #666;
+    }
+    > div {
+      color: #999;
+      font-size: 12px;
+    }
+  }
+}
+.goods-list {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+.goods-item {
+  width: 50%;
+  margin-bottom: 10px;
+  border-radius: 0.4em;
+  overflow: hidden;
+}
+.goods-img {
+  position: relative;
+  margin: 0 auto;
+  width: 158px;
+  height: 150px;
+  border-top-left-radius: 0.4em;
+  border-top-right-radius: 0.4em;
+  overflow: hidden;
+  > img {
+    width: 100%;
+    height: 100%;
+  }
+}
+.goods-desc {
+  border-bottom-left-radius: 0.4em;
+  border-bottom-right-radius: 0.4em;
+  width: 158px;
+  background: #fff;
+  padding: 4px;
+  margin: 0 auto;
+  > .goods-title {
+    font-size: 12px;
+    height: 38px;
+    display: -webkit-box;
+    font-weight: 500;
+    -webkit-box-orient: vertical;
+
+    -webkit-line-clamp: 2;
+
+    overflow: hidden;
+  }
+  > .goods-bottom {
+    display: flex;
+    > .goods-price {
+      line-height: 2;
+      color: $theme_color;
+    }
+  }
+}
+.goods-icon {
+  right: 5px;
+  top: 5px;
+  position: absolute;
+}
+</style>
diff --git a/seller/src/views/shop/wap/template/tpl_group.vue b/seller/src/views/shop/wap/template/tpl_group.vue
new file mode 100644
index 00000000..c3abd591
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_group.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="layout">
+    <div class="join-list">
+      <div class="join-title">
+        <div>{{ res.list[0].title }}</div>
+
+        <div>更多</div>
+      </div>
+      <div class="join-box">
+        <div class="join-item" v-for="item in 4" :key="item">
+          <div class="item-img-box">
+           
+            <img
+              class="item-img"
+              src="https://picsum.photos/id/268/200/200"
+              alt
+            />
+          </div>
+          <div class="item-price">
+            <span>￥120.00</span>
+          </div>
+          <div class="item-line-through">
+            <span>￥190.00</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["res"]
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+@import './advertising.scss';
+
+</style>
\ No newline at end of file
diff --git a/seller/src/views/shop/wap/template/tpl_integral.vue b/seller/src/views/shop/wap/template/tpl_integral.vue
new file mode 100644
index 00000000..53eb17a6
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_integral.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="layout">
+    <div class="join-list">
+      <div class="join-title">
+        <div>{{ res.list[0].title }}</div>
+
+        <div>更多</div>
+      </div>
+      <div class="join-box">
+        <div class="join-item" v-for="item in 4" :key="item">
+          <div class="item-img-box">
+            <img
+              class="item-img"
+              src="https://picsum.photos/id/268/200/200"
+              alt
+            />
+           
+          </div>
+          <div class="item-price">
+            <span>20积分</span>
+          </div>
+          <div class="item-line-through">
+            <span>30积分</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["res"]
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.join-box {
+  display: flex;
+}
+.item-price {
+  > span {
+    font-size: 15px;
+    font-weight: 500;
+    color: #e1212b;
+  }
+}
+.join-item {
+  flex: 1;
+}
+.item-img {
+  width: 75px;
+  height: 75px;
+  margin: 0 auto;
+  display: block;
+}
+.item-img-box {
+  position: relative;
+}
+.item-line-through {
+  > span {
+    font-size: 10px;
+    font-weight: 400;
+    text-decoration: line-through;
+    color: #999;
+  }
+}
+.item-position-tips {
+  position: absolute;
+  right: 0;
+  color: #fff;
+  font-size: 12px;
+  bottom: 0;
+}
+.join-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  height: 50px;
+  > div:nth-of-type(1) {
+    font-size: 16px;
+    font-weight: bold;
+  }
+  > div:nth-of-type(2) {
+    font-size: 12px;
+    color: #999;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/seller/src/views/shop/wap/template/tpl_join_group.vue b/seller/src/views/shop/wap/template/tpl_join_group.vue
new file mode 100644
index 00000000..3b60a09f
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_join_group.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="layout">
+    <div class="join-list">
+      <div class="join-title">
+        <div>{{ res.list[0].title }}</div>
+
+        <div>更多</div>
+      </div>
+      <div class="join-box">
+        <div class="join-item" v-for="item in 4" :key="item">
+          <div class="item-img-box">
+            <img
+              class="item-img"
+              src="https://picsum.photos/id/268/200/200"
+              alt
+            />
+            <div class="item-position-tips">2人团</div>
+          </div>
+          <div class="item-price">
+            <span>￥120.00</span>
+          </div>
+          <div class="item-line-through">
+            <span>￥120.00</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["res"]
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.join-box {
+  display: flex;
+}
+.item-price {
+  > span {
+    font-size: 15px;
+    font-weight: 500;
+    color: #e1212b;
+  }
+}
+.join-item {
+  flex: 1;
+}
+.item-img {
+  width: 75px;
+  height: 75px;
+  margin: 0 auto;
+  display: block;
+}
+.item-img-box {
+  position: relative;
+}
+.item-line-through {
+  > span {
+    font-size: 10px;
+    font-weight: 400;
+    text-decoration: line-through;
+    color: #999;
+  }
+}
+.item-position-tips {
+  position: absolute;
+  right: 0;
+  color: #fff;
+  font-size: 12px;
+  bottom: 0;
+}
+.join-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  height: 50px;
+  > div:nth-of-type(1) {
+    font-size: 16px;
+    font-weight: bold;
+  }
+  > div:nth-of-type(2) {
+    font-size: 12px;
+    color: #999;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/seller/src/views/shop/wap/template/tpl_left_one_right_two.vue b/seller/src/views/shop/wap/template/tpl_left_one_right_two.vue
new file mode 100644
index 00000000..07ee3c05
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_left_one_right_two.vue
@@ -0,0 +1,34 @@
+
+<template>
+  <div class="layout">
+    <div class="view-height-150">
+      <img class="image-mode" :src="res.list[0].img" />
+    </div>
+    <div class="view-height-150">
+      <div class="view-height-75">
+        <img class="image-mode" :src="res.list[1].img" alt />
+      </div>
+      <div class="view-height-75">
+        <img class="image-mode" :src="res.list[2].img" alt />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: "左一右二",
+  props: ["res"]
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.layout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-size: cover;
+}
+
+</style>
diff --git a/seller/src/views/shop/wap/template/tpl_left_two_right_one.vue b/seller/src/views/shop/wap/template/tpl_left_two_right_one.vue
new file mode 100644
index 00000000..a7adb408
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_left_two_right_one.vue
@@ -0,0 +1,39 @@
+
+<template>
+  <div class="layout ">
+    <div class="view-height-150">
+      <div class="view-height-75">
+        <img class="image-mode" :src="res.list[0].img" alt />
+      </div>
+      <div class="view-height-75">
+        <img class="image-mode" :src="res.list[1].img" alt />
+      </div>
+    </div>
+    <div class="view-height-150">
+      <img class="image-mode" style="height:150px;" :src="res.list[2].img" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: "左二右一",
+  props: ["res"]
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.layout {
+  height: 150px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-size: cover;
+}
+.view-height-75 {
+  .image-mode {
+    height: 75px;
+  }
+}
+</style>
diff --git a/seller/src/views/shop/wap/template/tpl_menu.vue b/seller/src/views/shop/wap/template/tpl_menu.vue
new file mode 100644
index 00000000..7fd1357c
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_menu.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="layout">
+        <div class="menu-list">
+            <div class="menu-item" v-for="(item,index) in res.list" :key="index">
+                <div>
+                    <img class="menu-img" :src="item.img" alt="">
+                </div>
+                <div class="menu-title">{{item.title}}</div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props:['res']
+}
+</script>
+<style lang="scss" scoped>
+   @import "./tpl.scss";
+   .menu-list{
+       display: flex;
+       align-items: center;
+       flex-wrap: wrap;
+
+       >.menu-item{
+           text-align: center;
+           width: 20%;
+           margin:10px 0;
+       }
+   }
+   .menu-img{
+       width: 44px;
+       height: 44px;
+   }
+   .menu-title{
+       font-size: 12px;
+   }
+</style>
diff --git a/seller/src/views/shop/wap/template/tpl_search.vue b/seller/src/views/shop/wap/template/tpl_search.vue
new file mode 100644
index 00000000..f190bf6a
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_search.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="layout">
+        <div class="search">
+            <Icon type="ios-search" />{{res.list[0].title}}
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    props: ['res']
+}
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.search{
+    height: 32px;
+    border-radius: 5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #ededed;
+}
+.layout{
+    background: #fff;
+}
+</style>
\ No newline at end of file
diff --git a/seller/src/views/shop/wap/template/tpl_spike.vue b/seller/src/views/shop/wap/template/tpl_spike.vue
new file mode 100644
index 00000000..c3abd591
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_spike.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="layout">
+    <div class="join-list">
+      <div class="join-title">
+        <div>{{ res.list[0].title }}</div>
+
+        <div>更多</div>
+      </div>
+      <div class="join-box">
+        <div class="join-item" v-for="item in 4" :key="item">
+          <div class="item-img-box">
+           
+            <img
+              class="item-img"
+              src="https://picsum.photos/id/268/200/200"
+              alt
+            />
+          </div>
+          <div class="item-price">
+            <span>￥120.00</span>
+          </div>
+          <div class="item-line-through">
+            <span>￥190.00</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["res"]
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+@import './advertising.scss';
+
+</style>
\ No newline at end of file
diff --git a/seller/src/views/shop/wap/template/tpl_text_picture.vue b/seller/src/views/shop/wap/template/tpl_text_picture.vue
new file mode 100644
index 00000000..add2784f
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_text_picture.vue
@@ -0,0 +1,91 @@
+
+<template>
+  <div class="layout">
+    <div class="view-list">
+      <div class="view-item">
+        <div class="-item-tilte">{{res.list[0].title}}</div>
+        <div class="-item-image">
+          <img :src="res.list[0].img" alt />
+        </div>
+      </div>
+      <div class="view-item">
+        <div class="-item-tilte">{{res.list[1].title}}</div>
+        <div class="-item-image">
+          <img :src="res.list[1].img" alt />
+        </div>
+      </div>
+    </div>
+    <div class="view-list">
+      <div class="view-item">
+        <div class="-item-tilte">{{res.list[2].title}}</div>
+        <div class="-item-image">
+          <img :src="res.list[2].img" alt />
+        </div>
+      </div>
+      <div class="view-item">
+        <div class="-item-tilte">{{res.list[3].title}}</div>
+        <div class="-item-image">
+          <img :src="res.list[3].img" alt />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: "文字图片模板",
+  props: ["res"]
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.layout {
+  display: flex;
+  background: #e8e8e8;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+  padding: 0;
+}
+.-item-image{
+
+     padding: 10px ;
+     >img{
+
+         width: 100%;
+     }
+}
+.-item-tilte {
+  background: #ff9f28;
+  height: 30px;
+  color: #fff;
+  font-size: 14px;
+  text-align: center;
+  line-height: 30px;
+}
+
+.view-list {
+  width: 48%;
+  margin: 0 auto;
+  display: flex;
+  background: #fff;
+   border-top-left-radius: 0.8em;
+    border-top-right-radius: 0.8em;
+    border: 1px solid #ededed;
+
+  > .view-item {
+    width: 50%;
+  }
+  > .view-item:nth-of-type(1) {
+    > .-item-tilte {
+      border-top-left-radius: 0.8em;
+    }
+  }
+  > .view-item:nth-of-type(2) {
+    > .-item-tilte {
+      border-top-right-radius: 0.8em;
+    }
+  }
+}
+</style>
diff --git a/seller/src/views/shop/wap/template/tpl_title.vue b/seller/src/views/shop/wap/template/tpl_title.vue
new file mode 100644
index 00000000..5fce25ff
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_title.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="layout">
+    <div class="background">
+      <div class="title" :style="{ color: res.list[0].color }">
+        {{ res.list[0].title }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: "标题栏",
+  props: ["res"]
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.background {
+  background: url("../../../../assets/title.png") no-repeat;
+  position: absolute;
+  z-index: 2;
+  width: 100%;
+
+  height: 42px;
+  background-size: cover;
+}
+.layout {
+  text-align: center;
+  position: relative;
+  height: 42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background: #ffffff;
+}
+.title {
+  line-height: 42px;
+  font-size: 15px;
+  font-weight: bold;
+}
+</style>
diff --git a/seller/src/views/shop/wap/template/tpl_top_one_bottom_two.vue b/seller/src/views/shop/wap/template/tpl_top_one_bottom_two.vue
new file mode 100644
index 00000000..3eae5ffc
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_top_one_bottom_two.vue
@@ -0,0 +1,47 @@
+
+<template>
+  <div class="layout">
+    <div class="view-width-100">
+      <img class="image-mode" :src="res.list[0].img" />
+    </div>
+    <div class="view-width-100">
+      <div class="view-height-85">
+        <img class="image-mode" :src="res.list[1].img" alt />
+      </div>
+      <div class="view-height-85">
+        <img class="image-mode" :src="res.list[2].img" alt />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: "上一下二",
+  props: ["res"]
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.layout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+  height: 170px;
+  flex-direction: column;
+}
+img {
+  width: 100% !important;
+  height: 85px !important;
+}
+.view-width-100 {
+  padding: 1px 0;
+  display: flex;
+  height: 85px;
+}
+.view-height-85 {
+  padding: 0 1px;
+  width: 50%;
+}
+</style>
\ No newline at end of file
diff --git a/seller/src/views/shop/wap/template/tpl_top_two_bottom_one.vue b/seller/src/views/shop/wap/template/tpl_top_two_bottom_one.vue
new file mode 100644
index 00000000..e8732162
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_top_two_bottom_one.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="layout">
+    <div class="view-width-100">
+      <div class="view-height-85">
+        <img class="image-mode" :src="res.list[0].img" alt />
+      </div>
+      <div class="view-height-85">
+        <img class="image-mode" :src="res.list[1].img" alt />
+      </div>
+    </div>
+    <div class="view-width-100">
+      <img class="image-mode" :src="res.list[2].img" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: "上二下一",
+  props: ["res"],
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.layout {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-size: cover;
+  height: 170px;
+  flex-direction: column;
+}
+img {
+  width: 100% !important;
+  height: 85px !important;
+}
+.view-width-100 {
+  padding: 1px 0;
+  display: flex;
+  height: 85px;
+  width: 100%;
+}
+.view-height-85 {
+  padding: 0 1px;
+  width: 50%;
+}
+</style>
diff --git a/seller/src/views/shop/wap/template/tpl_view_list.vue b/seller/src/views/shop/wap/template/tpl_view_list.vue
new file mode 100644
index 00000000..acd4568e
--- /dev/null
+++ b/seller/src/views/shop/wap/template/tpl_view_list.vue
@@ -0,0 +1,13 @@
+<template>
+    <div class="layout">请选择风格</div>
+</template>
+<script>
+export default {
+}
+</script>
+<style scoped lang="scss">
+@import './tpl.scss';
+.layout{
+    height: 100px;
+}
+</style>
\ No newline at end of file
diff --git a/seller/src/views/shop/wap/wapList.vue b/seller/src/views/shop/wap/wapList.vue
new file mode 100644
index 00000000..2af9e0df
--- /dev/null
+++ b/seller/src/views/shop/wap/wapList.vue
@@ -0,0 +1,216 @@
+<template>
+  <div class="wrapper">
+
+    <Card class="content">
+      <Button type="primary" @click="handleAdd()">添加页面</Button>
+      <div class="list">
+        <Spin size="large" fix v-if="loading"></Spin>
+        <div class="item item-title" >
+          <div>页面名称</div>
+          <div class="item-config">
+            <div>状态</div>
+            <div>操作</div>
+          </div>
+        </div>
+
+        <div class="item" v-for="(item, index) in list" :key="index">
+          <div>{{ item.name || "暂无模板昵称" }}</div>
+          <div class="item-config">
+            <i-switch v-model="item.pageShow" @on-change="changeSwitch(item)">
+              <span slot="open">开</span>
+              <span slot="close">关</span>
+            </i-switch>
+            <Button type="info" placement="right" @click="handleEdit(item)" size="small">修改</Button>
+            <Poptip confirm title="删除此模板？" @on-ok="handleDel(item)" >
+              <Button type="error" size="small">删除</Button>
+            </Poptip>
+          </div>
+        </div>
+        <div class="no-more" v-if="list.length ==0">暂无更多模板</div>
+      </div>
+      <Page :total="total" size="small" @on-change="(val) => {params.pageNumber = val; } " :current="params.pageNumber" :page-size="params.pageSize" show-sizer  :page-size-opts="[10, 20, 50]" @on-page-size-change="changePageSize"/>
+
+    </Card>
+
+  </div>
+
+</template>
+<script>
+import * as API_Other from "@/api/other.js";
+export default {
+  // components: {region},
+  data() {
+    return {
+      selectedIndex: 0, // 装修那个页面的下标
+      columns: [ // 表头
+        {
+          title: "页面名称",
+          key: "name",
+        },
+        {
+          title: "状态",
+        },
+        {
+          title: "操作",
+          key: "action",
+        },
+      ],
+
+      loading: false, // 加载状态
+
+      params: { // 请求参数
+        pageNumber: 1,
+        pageSize: 10,
+        sort: "createTime",
+        order: "desc",
+        pageType: "INDEX",
+        pageClientType: "H5",
+      },
+      total: 0, // 页面数量
+      list: [], // 总数据
+    };
+  },
+  watch: {
+    params: {
+      handler(val) {
+        // this.pageNumber++;
+        this.init();
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    // 切换tab
+    clickType(val,index) {
+      this.params.pageNumber = 1
+      this.selectedIndex = index
+      this.params.pageType = val;
+    },
+    // 是否发布
+    changeSwitch(item) {
+      this.loading = true;
+      API_Other.releasePageHome(item.id).then((res) => {
+        if (res.result) {
+          this.loading = false;
+          this.$Message.success("发布成功");
+          this.init();
+        }
+
+        this.init();
+
+        this.loading = false;
+      });
+    },
+    // 初始化数据
+    init() {
+      this.loading = true;
+      API_Other.getHomeList(this.params).then((res) => {
+        if (!res.result) return false;
+        this.loading = false;
+        res.result.records.forEach((item) => {
+          if (item.pageShow == "OPEN") {
+            item.pageShow = true;
+          } else {
+            item.pageShow = false;
+          }
+        });
+        this.list = res.result.records;
+        console.log(this.list);
+        this.total = res.result.total;
+      });
+    },
+    // 装修楼层
+    handleEdit(val) {
+      this.$router.push({
+        path: "/floorList/main",
+        query: { id: val.id, name: val.name, type: val.pageShow },
+      });
+    },
+    // 添加模板
+    handleAdd() {
+      this.$router.push({
+        path: "/floorList/main",
+      });
+    },
+     // 分页 改变页数
+     changePageSize(v) {
+      this.params.pageNumber = 1;
+      this.params.pageSize = v;
+      this.init();
+    },
+    // 删除模板
+    handleDel(val) {
+      this.loading = true;
+      API_Other.removePageHome(val.id).then((res) => {
+        if (res.result) {
+          this.loading = false;
+          this.init();
+          this.$Message.success("删除成功");
+        }
+
+        this.loading = false;
+      });
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+.category-item {
+  cursor: pointer;
+  padding: 4px;
+}
+.active {
+  background: #ededed;
+}
+.item-title {
+  background: #d7e7f5!important;
+  height: 54px;
+}
+.no-more {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.wrapper {
+  background: #fff;
+  padding: 20px;
+  display: flex;
+}
+.category {
+  flex: 2;
+}
+.content {
+  flex: 8;
+}
+* {
+  margin: 5px;
+}
+.list {
+  min-height: 600px;
+  position: relative;
+}
+.item:nth-of-type(2) {
+  margin: 0 5px;
+}
+.item {
+  width: 100% !important;
+  padding: 0 4px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  > .item-config {
+    width: 180px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+  }
+}
+.item:nth-of-type(2n+1) {
+  background: #f5f7fa;
+}
+</style>
diff --git a/seller/src/views/sys/oss-manage/ossManage.scss b/seller/src/views/sys/oss-manage/ossManage.scss
new file mode 100644
index 00000000..0045aca1
--- /dev/null
+++ b/seller/src/views/sys/oss-manage/ossManage.scss
@@ -0,0 +1,135 @@
+.search {
+  .oss-operation {
+    margin-bottom: 2vh;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+
+    button {
+      margin-right: 5px;
+    }
+  }
+}
+
+.none {
+  display: none;
+}
+
+.oss-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+}
+
+.oss-card {
+  margin: 10px 20px 10px 0;
+  width: 290px;
+
+  :hover {
+    .content .other .name {
+      color: #1890ff;
+      transition: color .3s;
+    }
+  }
+
+  cursor: pointer;
+
+  .ivu-card-body {
+    padding: 0;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+
+    :hover {
+      .play {
+        transition: opacity .3s;
+        opacity: 1 !important;
+      }
+    }
+
+    .img {
+      height: 135px;
+      object-fit: cover;
+    }
+
+    .video {
+      height: 135px;
+      position: relative;
+
+      .cover {
+        height: 100%;
+        width: 100%;
+        object-fit: fill;
+      }
+
+      .play {
+        position: absolute;
+        top: 43px;
+        left: 117px;
+        height: 50px;
+        width: 50px;
+        opacity: 0.8;
+      }
+    }
+
+    .other {
+      padding: 16px;
+      height: 135px;
+
+      .name {
+        font-size: 16px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        color: rgba(0, 0, 0, .85);
+        font-weight: 500;
+        margin-bottom: 4px;
+      }
+
+      .key {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        height: 45px;
+        word-break: break-all;
+        color: rgba(0, 0, 0, .45);
+      }
+
+      .info {
+        font-size: 12px;
+        color: rgba(0, 0, 0, .45);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        height: 36px;
+        word-break: break-all;
+      }
+    }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      height: 50px;
+      background: #f7f9fa;
+      border-top: 1px solid #e8e8e8;
+
+      i:hover {
+        color: #1890ff;
+      }
+
+      .btn {
+        display: flex;
+        justify-content: center;
+        width: 33.33%;
+        border-right: 1px solid #e8e8e8;
+      }
+
+      .btn-no {
+        display: flex;
+        justify-content: center;
+        width: 33.33%;
+      }
+    }
+  }
+}
diff --git a/seller/src/views/sys/oss-manage/ossManage.vue b/seller/src/views/sys/oss-manage/ossManage.vue
new file mode 100644
index 00000000..eb194c2d
--- /dev/null
+++ b/seller/src/views/sys/oss-manage/ossManage.vue
@@ -0,0 +1,820 @@
+<style lang="scss">
+@import "./ossManage.scss";
+</style>
+<template>
+  <div class="search">
+    <Card>
+      <div class="operation">
+        <Row @keydown.enter.native="handleSearch">
+          <Form ref="searchForm" :model="searchForm" inline :label-width="85"    class="search-form"
+          >
+            <Form-item label="原文件名" prop="name">
+              <Input
+                type="text"
+                v-model="searchForm.name"
+                placeholder="请输入原文件名"
+                clearable
+                style="width: 200px"
+              />
+            </Form-item>
+            <Form-item label="存储文件名" prop="fileKey">
+              <Input
+                type="text"
+                v-model="searchForm.fileKey"
+                placeholder="请输入存储文件名"
+                clearable
+                style="width: 200px"
+              />
+            </Form-item>
+           
+            <Form-item label="上传时间">
+              <DatePicker
+                v-model="selectDate"
+                type="daterange"
+                format="yyyy-MM-dd"
+                clearable
+                @on-change="selectDateRange"
+                placeholder="选择起始时间"
+                style="width: 200px"
+              ></DatePicker>
+            </Form-item>
+             <Button @click="handleSearch" type="primary" icon="ios-search" class="search-btn"
+              >搜索
+              </Button>
+          </Form>
+        </Row>
+        <div class="oss-operation padding-row">
+          <div>
+            <Upload
+              style="display:inline-block;"
+              :action="commonUrl + '/common/common/upload/file'"
+              :headers="accessToken"
+              :on-success="handleSuccess"
+              :on-error="handleError"
+              :show-upload-list="false"
+              :max-size="2048"
+              :on-exceeded-size="handleMaxSize"
+              multiple
+              ref="up"
+            >
+              <Button type="primary">上传文件</Button>
+            </Upload>
+            <Dropdown @on-click="handleDropdown">
+              <Button>
+                更多操作
+                <Icon type="md-arrow-dropdown"/>
+              </Button>
+              <DropdownMenu slot="list">
+                <DropdownItem name="refresh">刷新</DropdownItem>
+                <DropdownItem v-show="showType == 'list'" name="removeAll">批量删除
+                </DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+          </div>
+
+          <div>
+            <RadioGroup
+              v-model="fileType"
+              @on-change="changeFileType"
+              type="button" button-style="solid"
+              style="margin-right: 25px"
+            >
+              <Radio label="all">所有类型</Radio>
+              <Radio label="pic">图片</Radio>
+              <Radio label="video">视频</Radio>
+            </RadioGroup>
+            <RadioGroup
+              v-model="showType"
+              type="button" button-style="solid"
+              @on-change="changeShowType"
+            >
+              <Radio title="列表" label="list">
+                <Icon type="md-list"></Icon>
+              </Radio>
+              <Radio title="缩略图" label="thumb">
+                <Icon type="ios-apps"></Icon>
+              </Radio>
+            </RadioGroup>
+          </div>
+        </div>
+      </div>
+
+      <div v-show="showType == 'list'">
+        <Row >
+          <Alert show-icon>
+            已选择
+            <span >{{ selectCount }}</span> 项
+            <a class="select-clear" @click="clearSelectAll">清空</a>
+            <span v-if="selectCount > 0" style="margin-left: 15px"
+            >共计 {{ totalSize }} 存储量</span
+            >
+          </Alert>
+        </Row>
+        <Table
+          :loading="loading"
+          border
+          :columns="columns"
+          :data="data"
+          ref="table"
+          sortable="custom"
+          @on-sort-change="changeSort"
+          @on-selection-change="changeSelect"
+        ></Table>
+      </div>
+      <div v-show="showType == 'thumb'">
+        <div class="oss-wrapper">
+          <Card v-for="(item, i) in data" :key="i" class="oss-card">
+            <div class="content">
+              <img
+                @click="showPic(item)"
+                v-if="item.fileType.indexOf('image') >= 0"
+                class="img"
+                :src="item.url"
+              />
+              <div
+                v-else-if="item.fileType.indexOf('video') >= 0"
+                class="video"
+                @click="showVideo(item)"
+              >
+                <!-- 文件小于5MB显示video -->
+                <video class="cover" v-if="item.fileSize < 1024 * 1024 * 5">
+                  <source :src="item.url"/>
+                </video>
+                <img class="play" src="@/assets/play.png"/>
+              </div>
+              <div v-else class="other">
+                <div class="name">{{ item.name }}</div>
+                <div class="key">{{ item.fileKey }}</div>
+                <div class="info">
+                  文件类型：{{ item.fileType }} 文件大小：{{
+                    ((item.fileSize * 1.0) / (1024 * 1024)).toFixed(2)
+                  }}
+                  MB 创建时间：{{ item.createTime }}
+                </div>
+              </div>
+              <div class="actions">
+                <div class="btn">
+                  <Tooltip content="下载" placement="top">
+                    <Icon @click="download(item)" type="md-download" size="16"/>
+                  </Tooltip>
+                </div>
+                <div class="btn">
+                  <Tooltip content="重命名" placement="top">
+                    <Icon @click="rename(item)" type="md-create" size="16"/>
+                  </Tooltip>
+                </div>
+                <div class="btn-no">
+                  <Tooltip content="删除" placement="top">
+                    <Icon @click="remove(item)" type="md-trash" size="16"/>
+                  </Tooltip>
+                </div>
+              </div>
+            </div>
+          </Card>
+        </div>
+      </div>
+      <Row type="flex" justify="end" class="mt_10">
+        <Page
+          :current="searchForm.pageNumber"
+          :total="total"
+          :page-size="searchForm.pageSize"
+          @on-change="changePage"
+          @on-page-size-change="changePageSize"
+          :page-size-opts="pageSizeOpts"
+          size="small"
+          show-total
+          show-elevator
+          show-sizer
+        ></Page>
+      </Row>
+    </Card>
+
+      
+
+    <Modal
+      :title="modalTitle"
+      v-model="modalVisible"
+      :mask-closable="false"
+      :width="500"
+    >
+      <Form ref="form" :model="form" :label-width="95" :rules="formValidate">
+        <FormItem label="原文件名" prop="name">
+          <Input v-model="form.name"/>
+        </FormItem>
+        <FormItem label="存储文件名" prop="fileKey">
+          <Input v-model="form.fileKey" disabled/>
+        </FormItem>
+      </Form>
+      <div slot="footer">
+        <Button type="text" @click="handleCancel">取消</Button>
+        <Button type="primary" :loading="submitLoading" @click="handleSubmit"
+        >提交
+        </Button
+        >
+      </div>
+    </Modal>
+
+    <Modal v-model="picVisible" :title="picTitle" draggable>
+      <img
+        :src="file.url"
+        alt="无效的图片链接"
+        style="width: 100%; margin: 0 auto; display: block"
+      />
+      <div slot="footer">
+        <span
+        >文件类型：{{ file.fileType }} 文件大小：{{ file.msize }} 创建时间：{{
+            file.createTime
+          }}</span
+        >
+      </div>
+    </Modal>
+
+    <Modal
+      v-model="videoVisible"
+      :title="videoTitle"
+      :width="800"
+      @on-cancel="closeVideo"
+      draggable
+    >
+      <div id="dplayer"></div>
+      <div slot="footer">
+        <span
+        >文件类型：{{ file.fileType }} 文件大小：{{ file.msize }} 创建时间：{{
+            file.createTime
+          }}</span
+        >
+      </div>
+    </Modal>
+  </div>
+</template>
+
+<script>
+import {
+  getFileListData,
+  renameFile,
+  deleteFile,
+} from "@/api/index";
+import DPlayer from "dplayer";
+
+const config = require('@/config/index')
+import { commonUrl } from "@/libs/axios";
+var dp;
+export default {
+  name: "oss-manage",
+  props:{
+    isComponent:{
+      default: false,
+      type:Boolean
+    }
+  },
+  data() {
+    return {
+      commonUrl, // 上传文件路径
+      config, // api地址
+      selectImage: false, //是否是选择
+      accessToken: {}, // 上传token鉴权
+      loading: false, // 表单加载状态
+      fileType: "all", // 文件类型
+      showType: "list", // 展示类型
+      modalVisible: false, // 添加或编辑显示
+      uploadVisible: false, // 上传展示
+      videoVisible: false, // 文件modal
+      picVisible: false, // 图片modal
+      picTitle: "", // 图片title
+      videoTitle: "", // 视频title
+      modalTitle: "", // 添加或编辑标题
+      searchForm: {
+        // 搜索框对应data对象
+        name: "",
+        fileKey: "",
+        fileType: "",
+        pageNumber: 1, // 当前页数
+        pageSize: 10, // 页面大小
+        sort: "createTime", // 默认排序字段
+        order: "desc", // 默认排序方式
+        startDate: "", // 起始时间
+        endDate: "", // 终止时间
+      },
+      selectDate: null, // 选择日期绑定modal
+      oldKey: "", // 请求参数
+      form: { // 表单
+        name: "",
+        fileKey: "",
+      },
+      file: {}, // 文件数据
+      // 表单验证规则
+      formValidate: {
+        name: [{required: true, message: "不能为空", trigger: "blur"}],
+        fileKey: [{required: true, message: "不能为空", trigger: "blur"}],
+      },
+      submitLoading: false, // 添加或编辑提交状态
+      selectList: [], // 多选数据
+      selectCount: 0, // 多选计数
+      totalSize: "", // 文件大小统计
+      columns: [
+        // 表头
+        {
+          type: "selection",
+          width: 60,
+          align: "center",
+        },
+        {
+          title: "原文件名",
+          key: "name",
+          minWidth: 130,
+          sortable: true,
+          ellipsis: false,
+          tooltip: true,
+        },
+        {
+          title: "存储文件名",
+          key: "fileKey",
+          width: 165,
+          sortable: true,
+          ellipsis: false,
+          tooltip: true,
+        },
+        {
+          title: "缩略图(点击预览)",
+          key: "url",
+          width: 150,
+          align: "center",
+          render: (h, params) => {
+            if (params.row.fileType.includes("image") > 0) {
+              return h("img", {
+                attrs: {
+                  src: params.row.url || '',
+                  alt: "加载图片失败",
+                },
+                style: {
+                  cursor: "pointer",
+                  width: "80px",
+                  height: "60px",
+                  margin: "10px 0",
+                  "object-fit": "contain",
+                },
+                on: {
+                  click: () => {
+                    this.showPic(params.row);
+                  },
+                },
+              });
+            } else if (params.row.fileType.includes("video") > 0) {
+              // 如果视频文件大小超过5MB不予加载video
+              if (params.row.fileSize < 1024 * 1024 * 5) {
+                return h(
+                  "video",
+                  {
+                    style: {
+                      cursor: "pointer",
+                      width: "80px",
+                      height: "60px",
+                      margin: "10px 0",
+                      "object-fit": "contain",
+                    },
+                    on: {
+                      click: () => {
+                        this.showVideo(params.row);
+                      },
+                    },
+                  },
+                  [
+                    h("source", {
+                      attrs: {
+                        src: params.row.url,
+                      },
+                    }),
+                  ]
+                );
+              } else {
+                return h("img", {
+                  attrs: {
+                    src: require("@/assets/play.png"),
+                  },
+                  style: {
+                    cursor: "pointer",
+                    width: "80px",
+                    height: "60px",
+                    margin: "10px 0",
+                    "object-fit": "contain",
+                  },
+                  on: {
+                    click: () => {
+                      this.showVideo(params.row);
+                    },
+                  },
+                });
+              }
+            } else {
+              return h("span", "非多媒体类型");
+            }
+          },
+        },
+        {
+          title: "文件类型",
+          key: "fileType",
+          width: 115,
+          sortable: true,
+          className: this.selectImage == true ? "none" : "",
+        },
+        {
+          title: "文件大小",
+          key: "fileSize",
+          width: 115,
+          sortable: true,
+          className: this.selectImage == true ? "none" : "",
+          render: (h, params) => {
+            let m =
+              ((params.row.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+            return h("span", m);
+          },
+        },
+        {
+          title: "上传者",
+          key: "createBy",
+          width: 120,
+          sortable: true,
+          render: (h, params) => {
+            let m = "";
+            if(params.row.userEnums=="MANAGER"){
+            m="[管理员]"
+            }else if(params.row.userEnums=="STORE"){
+              m="[店铺]"
+            }else{
+              m="[会员]"
+            }
+            m += params.row.createBy
+            return h("span", m);
+          },
+        },
+        {
+          title: "上传时间",
+          key: "createTime",
+          width: 180,
+          sortable: true,
+          sortType: "desc",
+        },
+        {
+          title: "操作",
+          key: "action",
+          align: "center",
+          fixed: "right",
+          width: 200,
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "primary",
+                    size: "small",
+                  },
+                  style: {
+                    marginRight: "5px",
+                    display: this.selectImage == true ? "inline-block" : "none",
+                  },
+                  on: {
+                    click: () => {
+                      this.selectedParams(params.row);
+                    },
+                  },
+                },
+                "选择"
+              ),
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "info",
+                    size: "small",
+                  },
+                  style: {
+                    marginRight: "5px",
+                    display: this.selectImage == true ? "none" : "inline-block",
+                  },
+                  on: {
+                    click: () => {
+                      this.download(params.row);
+                    },
+                  },
+                },
+                "下载"
+              ),
+              h(
+                "Button",
+                {
+                  props: {
+                    size: "small",
+                    type: 'success'
+                  },
+                  style: {
+                    marginRight: "5px",
+                    display: this.selectImage == true ? "none" : "inline-block",
+                  },
+                  on: {
+                    click: () => {
+                      this.rename(params.row);
+                    },
+                  },
+                },
+                "重命名"
+              ),
+              h(
+                "Button",
+                {
+                  props: {
+                    type: "error",
+                    size: "small",
+                  },
+                  style: {
+                    display: this.selectImage == true ? "none" : "inline-block",
+                  },
+                  on: {
+                    click: () => {
+                      this.remove(params.row);
+                    },
+                  },
+                },
+                "删除"
+              ),
+            ]);
+          },
+        },
+      ],
+      data: [], // 表单数据
+      total: 0, // 表单数据总数
+      pageSizeOpts: [5, 10, 20], // 页码展示项
+    };
+  },
+  watch:{
+    selectImage(val) {
+      if (val && !this.data.length) this.init()
+    }
+  },
+  methods: {
+    /**
+     * 选择
+     */
+    selectedParams(val) {
+      this.$emit("callback", val);
+    },
+    // 更多操作
+    handleDropdown(name) {
+      if (name == "refresh") {
+        this.getDataList();
+      } else if (name == "removeAll") {
+        this.removeAll();
+      }
+    },
+    // 初始化数据
+    init() {
+      this.accessToken = {
+        accessToken: this.getStore("accessToken"),
+      };
+      this.getDataList();
+    },
+    // 查看大图
+    showPic(v) {
+      this.file = v;
+      this.file.msize = ((v.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+
+      this.picTitle = v.name + "(" + v.fileKey + ")";
+      this.picVisible = true;
+    },
+    // 查看视频
+    showVideo(v) {
+      dp = new DPlayer({
+        container: document.getElementById("dplayer"),
+        screenshot: true,
+        video: {
+          url: v.url,
+        },
+        danmaku: {
+          id: v.fileKey,
+          api: "https://api.prprpr.me/dplayer/",
+        },
+      });
+      this.file = v;
+      this.file.msize = ((v.fileSize * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+      this.videoTitle = v.name + "(" + v.fileKey + ")";
+      this.videoVisible = true;
+    },
+    // 关闭视频
+    closeVideo() {
+      dp.destroy();
+    },
+    // 分页 改变页码
+    changePage(v) {
+      this.searchForm.pageNumber = v;
+      this.getDataList();
+      this.clearSelectAll();
+    },
+    // 分页 改变页数
+    changePageSize(v) {
+      this.searchForm.pageNumber = 1;
+      this.searchForm.pageSize = v;
+      this.getDataList();
+    },
+    // 排序
+    changeSort(e) {
+      this.searchForm.sort = e.key;
+      this.searchForm.order = e.order;
+      if (e.order == "normal") {
+        this.searchForm.order = "";
+      }
+      this.getDataList();
+    },
+    // 起止时间从新赋值
+    selectDateRange(v) {
+      if (v) {
+        this.searchForm.startDate = v[0];
+        this.searchForm.endDate = v[1];
+      }
+    },
+    // 改变查看方式
+    changeShowType() {
+      this.searchForm.pageNumber = 1;
+      if (this.showType == "list") {
+        this.searchForm.pageSize = 10;
+      } else {
+        this.searchForm.pageSize = 12;
+      }
+      this.getDataList();
+    },
+    // 获取列表数据
+    getDataList() {
+      if (this.showType == "list") {
+        this.pageSizeOpts = [10, 20, 50];
+      } else {
+        this.pageSizeOpts = [12, 24, 48];
+      }
+      this.loading = true;
+      getFileListData(this.searchForm).then((res) => {
+        this.loading = false;
+
+        this.data = res.result.records;
+        this.total = res.result.total;
+      });
+    },
+    // 搜索
+    handleSearch() {
+      this.searchForm.title = this.searchForm.name;
+      this.searchForm.pageNumber = 1;
+      if (this.showType == "list") {
+        this.searchForm.pageSize = 5;
+      } else {
+        this.searchForm.pageSize = 12;
+      }
+      this.getDataList();
+    },
+    // 文件类型筛选
+    changeFileType() {
+      let name = this.fileType;
+      if (name == "all") {
+        this.searchForm.fileType = "";
+      } else if (name == "pic") {
+        this.searchForm.fileType = "image";
+      } else if (name == "video") {
+        this.searchForm.fileType = "video";
+      }
+      this.handleSearch();
+    },
+    // 上传文件超过大小限制
+    handleMaxSize(file) {
+      this.$Notice.warning({
+        title: "文件大小过大",
+        desc: "所选文件大小过大, 不得超过 1M.",
+      });
+    },
+    // 上传成功回调
+    handleSuccess(res, file) {
+      if (res.success) {
+        this.$Message.success("上传文件 " + file.name + " 成功");
+        this.getDataList();
+      } else {
+        this.$Message.error(res.message);
+      }
+    },
+    // 上传失败回调
+    handleError(error, file, fileList) {
+      this.$Message.error(error.toString());
+    },
+    // 清空上传文件
+    clearFiles() {
+      this.$refs.up.clearFiles();
+    },
+    // 取消修改文件名
+    handleCancel() {
+      this.modalVisible = false;
+    },
+    // 下载文件
+    download(v) {
+      window.open(
+        v.url + "?attname=&response-content-type=application/octet-stream"
+      );
+    },
+    // 批量删除文件
+    removeAll() {
+      if (this.selectCount <= 0) {
+        this.$Message.warning("您还未选择要删除的数据");
+        return;
+      }
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除所选的 " + this.selectCount + " 个文件?",
+        loading: true,
+        onOk: () => {
+          let ids = "";
+          this.selectList.forEach(function (e) {
+            ids += e.id + ",";
+          });
+          ids = ids.substring(0, ids.length - 1);
+          deleteFile(ids).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("批量删除文件成功");
+              this.clearSelectAll();
+              this.getDataList();
+            }
+          });
+        },
+      });
+    },
+    // 单个删除文件
+    remove(v) {
+      this.$Modal.confirm({
+        title: "确认删除",
+        content: "您确认要删除文件 " + v.name + " ?",
+        loading: true,
+        onOk: () => {
+          deleteFile(v.id).then((res) => {
+            this.$Modal.remove();
+            if (res.success) {
+              this.$Message.success("删除文件 " + v.name + " 成功");
+              this.getDataList();
+            }
+          });
+        },
+      });
+    },
+    // 提交修改文件名
+    handleSubmit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.submitLoading = true;
+          let params = {
+            id: this.form.id,
+            key: this.oldKey,
+            newKey: this.form.fileKey,
+            newName: this.form.name,
+          };
+          renameFile(params).then((res) => {
+            this.submitLoading = false;
+            if (res.success) {
+              this.$Message.success("操作成功");
+              this.getDataList();
+              this.modalVisible = false;
+            }
+          });
+        }
+      });
+    },
+    // 修改文件名modal
+    rename(v) {
+      this.modalTitle = "编辑文件名";
+      // 转换null为""
+      for (let attr in v) {
+        if (v[attr] == null) {
+          v[attr] = "";
+        }
+      }
+      let str = JSON.stringify(v);
+      let data = JSON.parse(str);
+      this.form = data;
+      this.oldKey = data.fileKey;
+      this.modalVisible = true;
+    },
+    // 清除选中状态
+    clearSelectAll() {
+      this.$refs.table.selectAll(false);
+      this.totalSize = "";
+    },
+    // 选中回调
+    changeSelect(e) {
+      this.selectList = e;
+      this.selectCount = e.length;
+      let size = 0;
+      e.forEach((item) => {
+        size += item.fileSize * 1.0;
+      });
+      this.totalSize = ((size * 1.0) / (1024 * 1024)).toFixed(2) + " MB";
+    },
+  },
+  mounted() {
+    if(!this.isComponent) { // 是组件的话，初始化不调用接口
+      this.init();
+    }
+  },
+ 
+};
+</script>