0.0.45

修改拖拽布局高度为10

src/api/cms.js

@@ -0,0 +1,87 @@
+import request from '@/utils/request'
+
+//C端网站请求无需token 但需要SiteId start ------------------------------------->
+
+//1.1 获取网站基本信息
+export function getSiteInfo(data) {
+  return request({
+    url: 'web/getSiteInfo',
+    method: 'post',
+    data
+  })
+}
+
+//1.2 获取网站导航池
+export function getSiteCategory(params) {
+  return request({
+    url: '/web/getSiteCategory',
+    method: 'get',
+    params
+  })
+}
+
+//1.3 获取网站底部导航
+export function getFooterCategoryList(params) {
+  return request({
+    url: '/web/getFooterCategoryList',
+    method: 'get',
+    params
+  })
+}
+
+//1.4 底部导航列表-详情
+export function getFooterContentList(params) {
+  return request({
+    url: '/web/getFooterContentList',
+    method: 'get',
+    params
+  })
+}
+
+//1.5 底部导航列表页-详情内容
+export function getFooterContentInfo(params) {
+  return request({
+    url: '/web/getFooterContentInfo',
+    method: 'get',
+    params
+  })
+}
+
+//1.6 获取行政区划
+export function selectWebsiteArea(params) {
+  return request({
+    url: '/web/selectWebsiteArea',
+    method: 'get',
+    params
+  })
+}
+
+//1.7 获取职能部门
+export function selectWebsiteDepartment(params) {
+  return request({
+    url: '/web/selectWebsiteDepartment',
+    method: 'get',
+    params
+  })
+}
+
+//1.8 获取某个站点下的新闻列表
+export function getWebsiteArticlesList(params) {
+  return request({
+    url: '/web/getWebsiteArticlesList',
+    method: 'get',
+    params
+  })
+}
+
+//1.9 获取新闻详情
+export function selectWebsiteArticleInfo(params) {
+  return request({
+    url: '/web/selectWebsiteArticleInfo',
+    method: 'get',
+    params
+  })
+}
+
+
+//C端网站请求无需token start ------------------------------------->

src/api/template.js

@@ -1,11 +1,4 @@
 import request from '@/utils/request'
 
 //mock
-//添加模板基本信息
-export function addBasic(data) {
-  return request({
-    url: '/template/addBasic',
-    method: 'post',
-    data
-  })
-}
+

src/layout/components/template/componentMenu.vue

@@ -7,33 +7,63 @@
     <div v-if="type == 'sector'">
       <el-scrollbar wrap-class="scrollbar-wrapper">
         <div class="sectorBox">
+          <div class="sectorItemBox" @click="addModule('headSector',11)">
+            <div class="sectorItem">
+              <img src="@/assets/template/sector/headSector.png" />
+            </div>
+            <div class="sectorItemTitle">页头</div>
+          </div>
+          <div class="sectorItemBox" @click="addModule('menuSector',2)">
+            <div class="sectorItem">
+              <img src="@/assets/template/sector/menuSector.png" />
+            </div>
+            <div class="sectorItemTitle">网站导航</div>
+          </div>
+          <div class="sectorItemBox" @click="addModule('imgTitleSector',3)">
+            <div class="sectorItem">
+              <img src="@/assets/template/sector/imgTitleSector.png" />
+            </div>
+            <div class="sectorItemTitle">图片标题</div>
+          </div>
           <div class="sectorItemBox">
             <div class="sectorItem">
-              <img src="@/assets/template/sector/demo.png" />
+              <img src="@/assets/template/sector/bannerSector.png" @click="addModule('bannerSector',8)"/>
             </div>
-            <div class="sectorItemTitle">页头板块</div>
+            <div class="sectorItemTitle">焦点图</div>
           </div>
           <div class="sectorItemBox">
             <div class="sectorItem">
-              <img src="@/assets/template/sector/demo.png" />
+              <img src="@/assets/template/sector/moreServicesSector.png" />
             </div>
-            <div class="sectorItemTitle">导航板块</div>
+            <div class="sectorItemTitle">多图菜单</div>
           </div>
           <div class="sectorItemBox">
             <div class="sectorItem">
-              <img src="@/assets/template/sector/demo.png" />
+              <img src="@/assets/template/sector/commentSector.png" />
             </div>
-            <div class="sectorItemTitle">页尾板块</div>
+            <div class="sectorItemTitle">文章列表带评论</div>
           </div>
           <div class="sectorItemBox">
             <div class="sectorItem">
-              <img src="@/assets/template/sector/demo.png" />
+              <img src="@/assets/template/sector/newsSector.png" />
             </div>
-            <div class="sectorItemTitle">页尾板块</div>
+            <div class="sectorItemTitle">文章列表</div>
           </div>
           <div class="sectorItemBox">
             <div class="sectorItem">
-              <img src="@/assets/template/sector/demo.png" />
+              <img src="@/assets/template/sector/imgSector.png" />
+            </div>
+            <div class="sectorItemTitle">纯图片组合</div>
+          </div>
+          <div class="sectorItemBox">
+            <div class="sectorItem">
+              <img src="@/assets/template/sector/linkSector.png" />
+            </div>
+            <div class="sectorItemTitle">友情链接</div>
+          </div>
+          <div class="sectorItemBox">
+            <div class="sectorItem">
+              <img src="@/assets/template/sector/footerSector.png" />
             </div>
             <div class="sectorItemTitle">页尾板块</div>
           </div>
@@ -63,7 +93,14 @@ export default {
     }
   },
   methods: {
-    
+    addModule(type,h){
+      let data = {
+        type: type,
+        h: h
+      }
+      console.log(data);
+      this.$store.commit('template/addModule',data);
+    }
   }
 }
 </script>

src/router/modules/dangyunlong.js

@@ -268,7 +268,7 @@ const dangyunlongRouter= [
         path: '',
         component: () => import('@/views/template/templateCreat'),
         meta: {
-          title: '搭建网站',
+          title: '构建网站模板',
           hidden: true,
           breadcrumb: true
         }

src/store/getters.js

@@ -11,6 +11,7 @@ const getters = {
   introduction: state => state.user.introduction,
   roles: state => state.user.roles,
   permission_routes: state => state.permission.routes,
-  errorLogs: state => state.errorLog.logs
+  errorLogs: state => state.errorLog.logs,
+  SiteId: state => state.template.editWebsiteId
 }
 export default getters

src/store/modules/template.js

@@ -1,11 +1,32 @@
-import {addBasic} from '@/api/template'
+import {getSiteInfo,getSiteCategory,selectWebsiteDepartment,selectWebsiteArea,getWebsiteArticlesList,
+  selectWebsiteArticleInfo} from '@/api/cms'
 
 const state = {
+  editWebsiteId: "",//创建网站的id
   stepStatus: true,//true显示步骤 false不显示
-  menuType: "sector" //sector板块 component组件
+  menuType: "sector", //sector板块 component组件
+  layout: [
+    // i = id 
+    // w = 最大宽度是12
+    // { i: "0", x: 0, y: 0, w: 12, h: 2, content:""},
+    // { i: "1", x: 0, y: 0, w: 12, h: 2, content:""},
+  ],
+  webSiteInfo:"",//网站信息
+  webSiteMenu:"",//网站包含的导航池
+  area:{//地区
+    economize:[],//省区
+    market:[],//市区
+    county:[]//县区
+  },
+  departmentList:"",//职能部门
 }
 
 const mutations = {
+  //0.全局配置 start------------------------------------------------------------>
+  //设置创建网站的id
+  setEditWebsiteId(state,id){
+    state.editWebsiteId = id;
+  },
   //展示步骤
   showStepStatus(state){
     state.stepStatus = true;
@@ -13,23 +34,136 @@ const mutations = {
   //隐藏步骤
   hiddenStepStatus(state){
     state.stepStatus = false;
-  }
+  },
+  //0.全局配置 start------------------------------------------------------------>
+  //1.配置模块 start------------------------------------------------------------>
+  //添加模块
+  addModule(state,data) {
+    //data.type 组件名称 data.h 模块高度 
+    // 计算当前布局的最大 y 值
+    const maxY = Math.max(...state.layout.map(item => item.y), 0);
+    state.layout.push({
+      i: state.layout.length, 
+      x: 0, 
+      y: maxY + 1, 
+      w: 12, 
+      h: data.h, 
+      type: data.type,
+      content:""
+    });
+  },
+  //删除模块
+  deleteModule(item) {
+    //找到对应的模块删除掉
+    for(let i = 0; i < state.layout.length; i++) {
+      if(state.layout[i].i == item.i) {
+        state.layout.splice(i, 1);
+      }
+    }
+  },
+  //1.配置模块 end------------------------------------------------------------>
+  //2.获取站点信息 start------------------------------------------------------------>
+  //获取站点详情
+  setWebsiteInfo(state,data){
+    state.webSiteInfo = data;
+  },
+  //获取站点导航池
+  setGetSiteCategory(state,data) {
+    state.webSiteMenu = data;
+  },
+  //设置地区
+  setArea(state,data){
+    //都没有的时候返回的是省
+    if(data.province==undefined){
+      state.area.economize = data;
+    }
+    //没有region的时候返回的是市
+    if(data.province!=undefined&&data.city!=undefined&&data.region==undefined){
+      state.area.market = data.city;
+    }
+    //有region的时候返回的是县
+    if(data.province!=undefined&&data.city!=undefined&&data.region!=undefined){
+      state.area.county = data.region;
+    }
+  },
+  //设置职能部门
+  setDepartmentList(state,data){
+    state.departmentList = data;
+  },
+  //修改模块高度
+  setModuleHeight(state,data){
+    state.layout[data.i].h = data.h;
+  },
+  //2.获取站点信息 end------------------------------------------------------------>
 }
 
 const actions = {
-  //添加模板基本信息
-  addBasic({commit},data) {
+  //获取网站基本信息
+  getSiteInfo({commit},data){
+    return new Promise((resolve, reject) => {
+      getSiteInfo(data).then(response => {
+        commit('setWebsiteInfo', response.data);
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //获取网站导航池
+  getSiteCategory({commit},data){
     return new Promise((resolve, reject) => {
-      addBasic(data).then(response => {
+      getSiteCategory(data).then(response => {
+        commit('setGetSiteCategory', response.data);
         resolve(response)
       }).catch(error => {
         reject(error)
       })
     })
   },
+  //设置行政区划
+  selectWebsiteArea({commit},data){
+    return new Promise((resolve, reject) => {
+      selectWebsiteArea(data).then(response => {
+        commit('setArea', response.data);
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //设置职能部门
+  selectWebsiteDepartment({commit},data){
+    return new Promise((resolve, reject) => {
+      selectWebsiteDepartment(data).then(response => {
+        commit('setDepartmentList', response.data);
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //获取新闻列表
+  getWebsiteArticlesList({commit},data){
+    return new Promise((resolve, reject) => {
+      getWebsiteArticlesList(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  //获取新闻详情
+  selectWebsiteArticleInfo({commit},data){
+    return new Promise((resolve, reject) => {
+      selectWebsiteArticleInfo(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
 }
 
-
 export default {
   namespaced: true,
   state,

src/utils/request.js

@@ -23,6 +23,9 @@ service.interceptors.request.use(
       // please modify it according to the actual situation
       config.headers['token'] = getToken()
     }
+    if (store.getters.SiteId) {
+      config.headers['SiteId'] = store.getters.SiteId
+    }
     return config
   },
   error => {

src/views/template/public/step.vue

@@ -4,7 +4,7 @@
     <el-steps :active="activeNumber" align-center>
       <el-step title="填写模板基本信息" description="类型和网站底部信息" />
       <el-step title="选择模板风格" description="网站整体风格和样式" />
-      <el-step title="配置网站模块" description="展示哪些模块到网页" />
+      <el-step title="构建模板模块" description="展示哪些模块到模板上" />
       <el-step title="应用网站模板" description="应用该模板到您的站点" />
     </el-steps>
   </div>

src/views/template/style/1/bannerSector.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="bannerBox">
+    <div class="itemTopBox">
+      <mainTitle />
+    </div>
+    <div class="itemBottomBox">
+      <div class="bannerLayerBox">
+        <banner />
+      </div>
+      <div class="NewsListBox">
+        <tabsNews />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mainTitle from './components/mainTitle.vue'
+import banner from './components/banner.vue'
+import tabsNews from './components/tabsNews.vue'
+
+export default {
+  components: {
+    mainTitle,
+    banner,
+    tabsNews
+  },
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .bannerBox {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .itemTopBox {
+      border: 1px dashed #5570F1;
+      width: 80%;
+    }
+    .itemBottomBox {
+      border: 1px dashed #5570F1;
+      width: 80%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px 0;
+      .bannerLayerBox {
+        width: 55%;
+        height: 226px
+      }
+      .NewsListBox {
+        width: 45%;
+        box-sizing: border-box;
+        padding-left: 20px;
+        height: 226px
+      }
+    }
+    
+  }
+</style>

src/views/template/style/1/components/banner.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="bannerItemBox">
+    <el-carousel height="226px">
+      <el-carousel-item :key="1">
+        <img src="@/assets/template/component/banner1.png" /> 
+      </el-carousel-item>
+      <el-carousel-item :key="2">
+        <img src="@/assets/template/component/banner2.png" />
+      </el-carousel-item>
+      <el-carousel-item :key="3">
+        <img src="@/assets/template/component/banner3.png" />
+      </el-carousel-item>
+    </el-carousel>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      articleId:2509
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .bannerItemBox {
+    width: 100%;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
+

src/views/template/style/1/components/mainTitle.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="mainTitleBox">
+    <img src="@/assets/template/component/newsIcon.png" />
+    <div class="mainTitleText">习近平在中华全国供销合作社成立70周年</div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      articleId:2509
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .mainTitleBox {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      width: 54px;
+      height: 54px;
+      margin-right: 40px;
+    }
+    .mainTitleText {
+      font-size: 30px;
+      color: #19499F;
+      font-weight: bold;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+</style>

src/views/template/style/1/components/tabsNews.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="tabsNewsBox">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="地方动态" name="first">
+        <ul class="newsListBox">
+          <li>
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li>
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li>
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li>
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li>
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="农资市场" name="second"></el-tab-pane>
+      <el-tab-pane label="农产市场" name="third"></el-tab-pane>
+      <el-tab-pane label="农村市场" name="fourth"></el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      activeName:"first"
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tabsNewsBox {
+    .newsListBox {
+      padding: 0;
+      li {
+        list-style-type: none;
+        height: 20px;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        a {
+          display: block;
+          background: url('../../../../../assets/template/component/listyle.png') no-repeat left center;
+          box-sizing: border-box;
+          padding-left: 20px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          flex: 1;
+          font-size: 16px;
+        }
+        div {
+          color: #999;
+          width: 80px;
+        }
+      }
+      
+     
+    }
+  }
+</style>
+

src/views/template/style/1/components/topInfo.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="headTopBox">
+    <div class="headTopInfo">
+      <div class="headTopInfoLeft">欢迎光临：{{ this.$store.state.template.webSiteInfo.website_name }}</div>
+      <div class="headTopInfoRight">
+        <div><i class="el-icon-office-building"></i>商圈</div>
+        <div><i class="el-icon-data-board"></i>广告服务</div>
+        <div><i class="el-icon-user"></i>登录</div>
+        <div><i class="el-icon-edit"></i>注册</div>
+      </div>
+    </div>
+    <div class="headTopLogoBox">
+      <img :src="this.$store.state.template.webSiteInfo.logo">
+      <div class="headTopLogoInputBox">
+        <el-input placeholder="请输入内容" v-model="searchValue"></el-input>
+        <el-button type="primary">搜索</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      searchValue:""
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .headTopBox {
+    width: 80%;
+    border: 1px dashed #5570F1;
+    .headTopInfo {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 10px 20px;
+      font-size: 12px;
+      .headTopInfoRight {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        div {
+          margin-left: 10px;
+          i {
+            margin-right: 5px;
+          }
+        }
+      }
+    }
+    .headTopLogoBox {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 30px 0;
+      img {
+        width: 300px;
+        height: 90px;
+        display: block;
+      }
+      .headTopLogoInputBox {
+        width: 300px;
+        color: #333;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        button {
+          border-radius: 0 !important;
+          background: #19499F !important;
+          ;
+        }
+      }
+    }
+  }
+  
+</style>

src/views/template/style/1/headSector.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="headSectorBox">
+    <topInfo />
+  </div>
+</template>
+
+<script>
+import topInfo from './components/topInfo.vue';
+
+export default {
+  props: {
+    
+  },
+  components: {
+    topInfo,
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .headSectorBox {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    background: url('../../../../assets/template/component/style1topbg.png') no-repeat center center;
+    background-size: 100% 100%;
+  }
+</style>

src/views/template/style/1/imgTitleSector.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="imgTitleSectorBox">
+    <div class="imgSectorBox">
+      <img src="@/assets/template/sector/imgTitleSector.png" />
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .imgTitleSectorBox {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .imgSectorBox {
+      border: 1px dashed #5570F1;
+      width: 80%;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+</style>

src/views/template/style/1/menuSector.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="menuSectorBox" ref="menuSectorBox">
+    <div class="menuBoxBg">
+      <div class="menuBox">
+        <div>首页</div>
+        <div v-for="item in this.$store.state.template.webSiteMenu">{{item.name}}</div>
+      </div>
+    </div>
+    <div class="menuSectorInputBox">
+      <div class="menuSectorInputBoxItem">
+        行政职能查询：
+        <el-select v-model="departments" filterable placeholder="请选择职能部门">
+          <el-option
+            v-for="item in this.$store.state.template.departmentList"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </div>
+      <div class="menuSectorInputBoxItem">
+        行政区划查询：
+        <el-select v-model="area.economize" placeholder="请选择省.." @change="changeMarket">
+          <el-option
+            v-for="item in this.$store.state.template.area.economize"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
+        <el-select v-model="area.market" placeholder="请选择市.." @change="changeCounty">
+          <el-option
+            v-for="item in this.$store.state.template.area.market"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
+        <el-select v-model="area.county" placeholder="请选择县..">
+          <el-option
+            v-for="item in this.$store.state.template.area.county"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id">
+          </el-option>
+        </el-select>
+      </div>
+    </div>
+  </div>
+  
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      area:{//地区
+        economize:"",//省区
+        market:"",//市区
+        county:""//县区
+      },
+      departments:""
+    };
+  },
+  methods: {
+    //选择市
+    changeMarket(){
+      this.area.market = "";
+      this.area.county = "";
+      this.$store.dispatch('template/selectWebsiteArea',{province:this.area.economize});
+    },
+    //选择县
+    changeCounty(data){
+      this.area.county = "";
+      this.$store.dispatch('template/selectWebsiteArea',{province:this.area.economize,city:this.area.market});
+    }
+  },
+  mounted() {
+    //获取当前元素的高度，然后修改store中的layer
+    //console.log(this.id);
+    const menuSectorBoxHeight = this.$refs.menuSectorBox.clientHeight; // 获取高度
+    //console.log(menuSectorBoxHeight);
+    let h = Math.round(menuSectorBoxHeight / 30);
+    this.$store.commit('template/setModuleHeight',{i:this.id,h:h});
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .menuSectorBox {
+    width: 100%;
+    .menuBoxBg {
+      width: 100%;
+      background: #19499F;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .menuBox {
+        width: 80%;
+        border: 1px dashed #fff;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        div {
+          width: 12.5%;
+          font-size: 14px;
+          height: 28px;
+          line-height: 28px;
+          text-align: center;
+          overflow: hidden; 
+          white-space: nowrap; 
+          text-overflow: ellipsis; 
+          text-align: center;
+          color: #fff;
+        }
+      }
+    }
+    .menuSectorInputBox {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 14px;
+      width: 80%;
+      margin: 0 auto;
+      border: 1px dashed #5570F1;
+      .menuSectorInputBoxItem {
+        .el-input {
+          width: 100px;
+        }
+      }
+    }
+  }
+  //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
+  ::v-deep .menuSectorInputBox .menuSectorInputBoxItem .el-input {
+    width: 100px !important;
+  }
+  //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
+</style>

src/views/template/style/1/tableTitle.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="tableTitle">
-    <span class="tableFloatLine"></span>
-    {{name}}
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      someData: '',
-    };
-  },
-};
-</script>
-
-<style scoped lang="less">
-  .tableTitle {
-    color:#333333;
-    position: relative;
-    padding-bottom: 20px;
-    .tableFloatLine {
-      width: 3px;
-      height:16px;
-      background:#5570F1;
-      display: block;
-      position: absolute;
-      left:-20px;
-      top:1px;
-    }
-  }
-</style>

src/views/template/templateList.vue

@@ -40,7 +40,7 @@
             <el-table-column prop="website_name" label="网站名称"></el-table-column>
             <el-table-column prop="template_name" label="风格名称" width="100">
               <template slot-scope="scope">
-                <div v-if="scope.row.template_name==''">无</div>
+                <div v-if="scope.row.template_name==''"></div>
                 <div v-else>{{scope.row.template_name}}</div>
               </template>
             </el-table-column>
@@ -49,15 +49,16 @@
             <el-table-column prop="updated_at" label="更新时间"></el-table-column>
             <el-table-column prop="status" label="状态" width="100">
               <template slot-scope="scope">
-                <div v-if="scope.row.status==0">未应用</div>
-                <div v-if="scope.row.status==1">已应用</div>
+                <div v-if="scope.row.status==0">未构建</div>
+                <div v-if="scope.row.status==1">未应用</div>
+                <div v-if="scope.row.status==2">已应用</div>
               </template>
             </el-table-column>
             <el-table-column fixed="right" label="操作" header-align="center" width="180">
               <template slot-scope="scope">
                 <div class="listBtnBox">
-                  <div class="listEditBtn" @click="getDataMain(scope.row.id)" v-if="scope.row.status==1"><i class="el-icon-edit-outline"></i>编辑</div>
-                  <div class="listMainBtn" @click="creatWebsite(scope.row.id)" v-if="scope.row.status==0"><i class="el-icon-brush"></i>构建</div>
+                  <div class="listEditBtn" @click="getDataMain(scope.row.id)" v-if="scope.row.status==2"><i class="el-icon-edit-outline"></i>编辑</div>
+                  <div class="listMainBtn" @click="creatWebsite(scope.row.id)" v-if="scope.row.status==0||scope.row.status==1"><i class="el-icon-brush"></i>构建</div>
                   <div class="listSaveBtn"><i class="el-icon-finished"></i>应用</div>
                 </div>
               </template>
@@ -97,16 +98,16 @@ export default {
       useTemplateName:"已选择风格",
       windowStatus:false,//弹出框
       tableData:[
-        {id:1,website_name:"中国三农市场网",template_name:"",template_page:"首页,分类页,列表页,详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:0},
-        {id:2,website_name:"中农兴业网",template_name:"怒火蔓延",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
-        {id:3,website_name:"中农兴业市场网",template_name:"毒舌律师",template_page:"首页,分类页,列表页,详情页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
-        {id:4,website_name:"中农兴业网",template_name:"",template_page:"首页,分类页,列表页,详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:0},
-        {id:5,website_name:"金政网",template_name:"存亡之战",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
-        {id:6,website_name:"三农资讯网",template_name:"老无所依",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
-        {id:7,website_name:"农民网",template_name:"金刚川",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
-        {id:8,website_name:"中国三农市场网",template_name:"八佰",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
-        {id:9,website_name:"中农兴业网",template_name:"破地狱",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
-        {id:10,website_name:"中国金政网",template_name:"慕然回首",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1}
+        {id:11,website_name:"中国三农市场网",template_name:"",template_page:"",created_at:"",updated_at:"",status:0},
+        {id:11,website_name:"中农兴业网",template_name:"怒火蔓延",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
+        {id:11,website_name:"中农兴业市场网",template_name:"毒舌律师",template_page:"首页,分类页,列表页,详情页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:1},
+        {id:11,website_name:"中农兴业网",template_name:"",template_page:"首页,分类页,列表页,详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:0},
+        {id:5,website_name:"金政网",template_name:"存亡之战",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
+        {id:6,website_name:"三农资讯网",template_name:"老无所依",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
+        {id:7,website_name:"农民网",template_name:"金刚川",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
+        {id:8,website_name:"中国三农市场网",template_name:"八佰",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
+        {id:9,website_name:"中农兴业网",template_name:"破地狱",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2},
+        {id:10,website_name:"中国金政网",template_name:"慕然回首",template_page:"首页,分类页,列表页,详情页,自定义列表页,自定义详情页",created_at:"2024-12-16 10:00:00",updated_at:"2024-12-16 10:00:00",status:2}
       ],//内容
       getApiData:{  
         page:1,//当前是第几页
@@ -183,21 +184,21 @@ export default {
     //列表和分页相关 end ------------------------------------------------------------>
 
     //构建网站
-    creatWebsite(){
+    creatWebsite(id){
       this.$router.push({
         path: '/templateBase',
         query: {
-          id: this.editId
+          id: id
         }
       });
     },
 
     //编辑网站
-    getDataMain(){
+    getDataMain(id){
       this.$router.push({
         path: '/templateCreat',
         query: {
-          id: this.editId
+          id: id
         }
       });
     }