组件

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="bannerItemBox">
+    <editBtn :id="id" :sort="sort" :type="1" :size="3"/>
+    <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>
+import editBtn from '../../public/editBtn.vue'
+export default {
+  components: {
+    editBtn
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      articleId:2509
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .bannerItemBox {
+    width: 100%;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+</style>
+

src/views/template/style/components/bgGreyNews.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="bgGreyNewsBox">
+    <editBtn :id="id" :sort="1" :type="2" :size="6"/>
+    <div class="bgGreyNews">
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+      <a href="javascript:;">新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题新闻标题</a>
+    </div>
+  </div>
+</template>
+
+<script>
+import editBtn from '../../public/editBtn.vue'
+export default {
+  components: {
+    editBtn
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      activeName:"first"
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .bgGreyNewsBox {
+    background: #F2F2F2;
+    height: 100%;
+    .bgGreyNews {
+      a {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        border-bottom: 1px solid #D1D1D1;
+        font-size: 16px;
+        color: #333;
+        height: 37px;
+        line-height: 37px;
+        box-sizing: border-box;
+        padding: 0 20px;
+      }
+      a:last-child {
+        border-bottom: none;
+      }
+    }
+  }
+</style>
+

src/views/template/style/components/calendar.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="calendarMainBox">
+    <editBtn :id="id" :sort="sort" :type="6"/>
+    <div class="calendarTitle">
+      <span>三农调查</span>
+    </div>
+    <div class="calendarBg">
+      <span>问卷调查</span>
+    </div>
+    <div class="calendarItem">
+      <div class="calendarProblemItemTitle">问卷调查内容问卷调查内容问卷调查内容问卷调查..</div>
+      <el-input type="textarea" v-model="usertext" placeholder="请输入内容" rows="4"></el-input>
+      <el-button type="primary" class="calendarBtn" size="small">提交</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import editBtn from '../../public/editBtn.vue'
+export default {
+  components: { 
+    editBtn
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      usertext:"",
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .calendarMainBox {
+    overflow: hidden;
+    position: relative;
+    .calendarTitle {
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      span {
+        padding-left: 20px;
+        padding-right: 20px;
+        border-left: 5px solid #E8EDF6;
+        border-right: 5px solid #E8EDF6;
+      }
+    }
+    .calendarBg {
+      width: 100%;
+      height: 110px;
+      //background: url('../../../../assets/template/component/calendar.png') no-repeat center center;
+      background-size: 100% 100%;
+      box-sizing: border-box;
+      padding-top: 35px;
+      padding-left: 36px;
+      span {
+        font-size: 32px;
+        color: #fff;
+        font-weight: bold;
+      }
+    }
+    .calendarItem {
+      font-size: 18px;
+      background: #EAF3FF;
+      padding:20px;
+      position: relative;
+      .calendarProblemItemTitle {
+        margin-bottom: 20px;
+        height: 48px;
+      }
+      .calendarBtn {
+        position: absolute;
+        bottom: 30px;
+        right: 30px;
+      }
+    }
+  }
+</style>

src/views/template/style/components/fivePicture.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="fivePictureBox">
+    <editBtn :id="id" :sort="sort" :type="6"/>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle1.png"/></div>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle2.png"/></div>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle3.png"/></div>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle4.png"/></div>
+    <div class="fivePictureItem"><img src="@/assets/template/component/pictureTitle5.png"/></div>
+  </div>
+</template>
+
+<script>
+import editBtn from '../../public/editBtn.vue'
+export default {
+  components: {
+    editBtn
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+     
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .fivePictureBox {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px 0;
+    position: relative;
+    .fivePictureItem {
+      width: 20%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      img {
+        display: block;
+        width: 90%;
+      }
+    }
+  }
+</style>

src/views/template/style/components/footerInfo.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="footerInfoBox">
+    <div class="footerInfoBoxContent">
+      <div class="footerInfoBoxContentLeft">
+        <img src="@/assets/template/component/sign1.png">
+      </div>
+      <div class="footerInfoBoxContentMain">
+        <div>本站部分信息由相应民事主体自行提供，该信息内容的真实性、准确性和合法性应由该民事主体负责。三农市场信息网 对此不承担任何保证责任。</div>
+        <div>本网部分转载文章、图片等无法联系到权利人。请相关权利人与本网站联系。</div>
+        <div>北京中农兴业网络技术有限公司主办 | 政讯通·全国政务信息一体化办公室 主管</div>
+        <div>联系电话：010-56019387、010-80440269、010-69945235，监督电话：18516948318，违法和不良信息举报电话：010-57028685</div>
+        <div>第一办公区：北京市西城区敬胜胡同甲3号东侧；第二办公区：北京市东城区建国门内大街26号新闻大厦5层</div>
+        <div>邮箱: qgsndy@163.com 客服QQ : 2909421493 通联QQ : 213552413</div>
+      </div>
+      <div class="footerInfoBoxContentRight">
+        <img src="@/assets/template/component/sign2.png">
+      </div>
+    </div>
+    <div class="footerInfoBoxBottom">
+      <img src="@/assets/template/component/bottom1.png">
+      <img src="@/assets/template/component/bottom2.png">
+      <img src="@/assets/template/component/bottom3.png">
+      <img src="@/assets/template/component/bottom4.png">
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .footerInfoBox {
+    width: 80%;
+    border: 2px dashed #999;
+    .footerInfoBoxContent {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .footerInfoBoxContentLeft {
+        width: 10%;
+        box-sizing: border-box;
+        padding-right: 10px;
+        img {
+          width: 100%;
+          display: block;
+        }
+      }
+      .footerInfoBoxContentMain {
+        padding-top: 40px;
+        font-size: 14px;
+        div {
+          text-align: center;
+          padding-bottom: 10px;
+          color: #fff;
+        }
+      }
+      .footerInfoBoxContentRight {
+        width: 10%;
+        box-sizing: border-box;
+        padding-left: 10px;
+        img {
+          width: 100%;
+          display: block;
+        }
+      }
+    }
+    .footerInfoBoxBottom {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-top: 40px;
+      img {
+        width: 10%;
+        display: block;
+        margin-right: 10px;
+      }
+    }
+  }
+</style>
+

src/views/template/style/components/footerMenu.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="footerMenuBox">
+    <ul class="footerMenuUl">
+      <li>
+        <a href="javascript:;">菜单标题</a>
+      </li>
+      <li>
+        <a href="javascript:;">菜单标题</a>
+      </li>
+      <li>
+        <a href="javascript:;">菜单标题</a>
+      </li>
+      <li>
+        <a href="javascript:;">菜单标题</a>
+      </li>
+      <li>
+        <a href="javascript:;">菜单标题</a>
+      </li>
+      <li>
+        <a href="javascript:;">菜单标题</a>
+      </li>
+      <li>
+        <a href="javascript:;">菜单标题</a>
+      </li>
+      <li>
+        <a href="javascript:;">菜单标题</a>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .footerMenuBox {
+    width: 80%;
+    border: 2px dashed #999;
+    border-bottom: none;
+    .footerMenuUl {
+      padding: 0;
+      margin: 0;
+      overflow: hidden;
+      clear: both;
+      border-bottom: 1px solid #3B70D0;
+      li {
+        float: left;
+        width: 12.5%;
+        text-align: center;
+        list-style: none;
+        height: 60px;
+        line-height: 60px;
+        a {
+          display: block;
+          width: 100%;
+          white-space: nowrap; 
+          overflow: hidden; 
+          text-overflow: ellipsis;
+          font-size: 14px;
+          color: #fff;
+        }
+      }
+    }
+  }
+</style>
+

src/views/template/style/components/friendShipLink.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="friendShipLinkBox">
+    <editBtn :id="id" :sort="sort" :type="4"/>
+    <div class="friendShipLinkImgItemBox">
+      <div>
+        <img src="@/assets/template/component/link1.png">
+      </div>
+      <div>
+        <img src="@/assets/template/component/link2.png">
+      </div>
+      <div>
+        <img src="@/assets/template/component/link1.png">
+      </div>
+      <div>
+        <img src="@/assets/template/component/link2.png">
+      </div>
+      <div>
+        <img src="@/assets/template/component/link1.png">
+      </div>
+    </div>
+    <div class="friendShipLinkTextItemBox">
+      <a href="javascript:;">中国教育网</a>
+      <a href="javascript:;">中国人大网</a>
+      <a href="javascript:;">中国政协网</a>
+      <a href="javascript:;">纪委检查网</a>
+      <a href="javascript:;">最高人民法院</a>
+      <a href="javascript:;">最高人民检察院</a>
+      <a href="javascript:;">交通运输部</a>
+      <a href="javascript:;">国家铁路局</a>
+    </div>
+  </div>
+</template>
+
+<script>
+import editBtn from '../../public/editBtn.vue';
+export default {
+  components: {
+    editBtn
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .friendShipLinkBox {
+    position: relative;
+    width: 100%;
+    .friendShipLinkImgItemBox {
+      height: 80px;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      justify-content: space-between;
+      padding: 20px 0;
+      div {
+        width: 20%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        img {
+          width: 50%;
+        }
+      }
+    }
+    .friendShipLinkTextItemBox {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      padding-bottom: 10px;
+      a {
+        display: block;
+        width: 12.5%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 14px;
+        text-align: center;
+      }
+    }
+  }
+</style>
+

src/views/template/style/components/listNews.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="listNewsBox">
+    <editBtn :id="id" :sort="sort" :type="1" :size="5"/>
+    <div class="listNewsTitle">
+      <div class="listNewsStyleBorder">新闻列表标题</div>
+    </div>
+    <ul class="listNewsUl">
+      <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>
+  </div>
+</template>
+
+<script>
+import editBtn from '../../public/editBtn.vue'
+export default {
+  components: {
+    editBtn
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      activeName:"first"
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .listNewsBox {
+    position: relative;
+    .listNewsTitle {
+      color: #19499F;
+      font-size: 22px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #D9D9D9;
+      .listNewsStyleBorder {
+        border-bottom: 2px solid #19499F;
+        padding-bottom: 18px;
+        padding-top: 18px;
+      }
+    }
+    .listNewsUl {
+      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: 50px;
+        }
+      }
+    }
+  }
+</style>
+

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

@@ -0,0 +1,59 @@
+<template>
+  <div class="mainTitleBox">
+    <editBtn :id="id" :sort="sort" :type="1" :size="1"/>
+    <img src="@/assets/template/component/newsIcon.png" />
+    <div class="mainTitleText">习近平在中华全国供销合作社成立70周年</div>
+  </div>
+</template>
+
+<script>
+import editBtn from '../../public/editBtn.vue'
+export default {
+  components: {
+    editBtn
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+  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/components/styleTitle.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="styleTitleBox">
+    <editBtn :id="id" :sort="sort" :type="7" />
+    <div :class="['titleBoxStyle' + type]">
+      {{ text }}
+    </div>
+  </div>
+</template>
+
+<script>
+import editBtn from '../../public/editBtn.vue'
+export default {
+  components: {
+    editBtn
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      type:1,
+      text:"板块标题"
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .styleTitleBox {
+    //width: 468px;
+    width: 100%;
+    height: 41px;
+    text-align: center;
+    font-size: 32px;
+    font-weight: bold;
+    color: #333;
+    line-height: 41px;
+    position: relative;
+  }
+  .titleBoxStyle1{
+    background: url('../../../../assets/template/component/titleStyle1.png') no-repeat center center;
+  }
+</style>

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

@@ -0,0 +1,97 @@
+<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: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  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: 50px;
+        }
+      }
+      
+     
+    }
+  }
+</style>
+

src/views/template/style/components/tabs/2.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="tabsCalendarMainNewsBox">
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="市场资讯" name="sczx">
+        <ul class="newsListBox">
+          <li class="newsCalendarBox">
+            <div class="CalendarItemBox">
+              <div class="Calendar">
+                <div class="CalendarDay">3</div>
+                <div class="CalendarMonth">2024-12</div>
+              </div>
+              <div class="CalendarNewsTitle">
+                <div class="CalendarTitle">商务部：牢牢把握产业振兴，在抓好农产品冷链物流等方面采取更多务实举措</div>
+                <div class="newsContent">会议总结了前一阶段工作情况，研究商务服务乡村振兴重点工作和定点帮扶工作计划，部署下一步工作。 </div>
+              </div>
+            </div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="市场行情" name="schq"></el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      activeName:"sczx"
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tabsCalendarMainNewsBox {
+    width: 100%;
+    position: relative;
+    .newsListBox {
+      padding-left: 0;
+      .newsCalendarBox {
+        list-style-type: none;
+        margin-bottom: 20px;
+        width: 100%;
+        .CalendarItemBox {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+          .Calendar {
+            width: 100px;
+            height: 100px;
+            background: #EAF3FF;
+            box-sizing: border-box;
+            padding: 10px 10px 0 10px;
+            margin-right: 25px;
+            .CalendarDay {
+              font-size: 38px;
+              color: #19499F;
+              text-align: center;
+              padding-bottom: 10px;
+              border-bottom: 1px solid #19499F;
+            }
+            .CalendarMonth {
+              font-size: 16px;
+              color: #19499F;
+              text-align: center;
+              padding-top: 10px;
+            }
+          }
+          .CalendarNewsTitle {
+            flex: 1;
+            .CalendarTitle {
+              font-size: 18px;
+              color: #333;
+            }
+            .newsContent {
+              font-size: 16px;
+              color: #999999;
+              padding-top: 10px;
+            }
+          }
+        }
+      }
+      .newsItemBox {
+        list-style-type: none;
+        height: 20px;
+        margin-bottom: 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;
+        }
+      }
+    }
+  }
+</style>
+

src/views/template/style/components/tabsCalendarNews.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="tabsCalendarMainNewsBox">
+    <editBtn :id="id" :sort="sort" :type="1" :size="6"/>
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="市场资讯" name="sczx">
+        <ul class="newsListBox">
+          <li class="newsCalendarBox">
+            <div class="CalendarItemBox">
+              <div class="Calendar">
+                <div class="CalendarDay">3</div>
+                <div class="CalendarMonth">2024-12</div>
+              </div>
+              <div class="CalendarNewsTitle">
+                <div class="CalendarTitle">商务部：牢牢把握产业振兴，在抓好农产品冷链物流等方面采取更多务实举措</div>
+                <div class="newsContent">会议总结了前一阶段工作情况，研究商务服务乡村振兴重点工作和定点帮扶工作计划，部署下一步工作。 </div>
+              </div>
+            </div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+          <li class="newsItemBox">
+            <a href="javascript:;">资讯标题资讯标题资讯标题资讯标题资讯标题</a>
+            <div>11-29</div>
+          </li>
+        </ul>
+      </el-tab-pane>
+      <el-tab-pane label="市场行情" name="schq"></el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import editBtn from '../../public/editBtn.vue'
+export default {
+  components: {
+    editBtn
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      activeName:"sczx"
+    };
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  },
+  mounted() {
+
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tabsCalendarMainNewsBox {
+    width: 100%;
+    position: relative;
+    .newsListBox {
+      padding-left: 0;
+      .newsCalendarBox {
+        list-style-type: none;
+        margin-bottom: 20px;
+        width: 100%;
+        .CalendarItemBox {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          width: 100%;
+          .Calendar {
+            width: 100px;
+            height: 100px;
+            background: #EAF3FF;
+            box-sizing: border-box;
+            padding: 10px 10px 0 10px;
+            margin-right: 25px;
+            .CalendarDay {
+              font-size: 38px;
+              color: #19499F;
+              text-align: center;
+              padding-bottom: 10px;
+              border-bottom: 1px solid #19499F;
+            }
+            .CalendarMonth {
+              font-size: 16px;
+              color: #19499F;
+              text-align: center;
+              padding-top: 10px;
+            }
+          }
+          .CalendarNewsTitle {
+            flex: 1;
+            .CalendarTitle {
+              font-size: 18px;
+              color: #333;
+            }
+            .newsContent {
+              font-size: 16px;
+              color: #999999;
+              padding-top: 10px;
+            }
+          }
+        }
+      }
+      .newsItemBox {
+        list-style-type: none;
+        height: 20px;
+        margin-bottom: 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;
+        }
+      }
+    }
+  }
+</style>
+

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

@@ -0,0 +1,101 @@
+<template>
+  <div class="tabsNewsBox">
+    <editBtn :id="id" :sort="sort" :type="2" :size="5"/>
+    <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>
+import editBtn from '../../public/editBtn.vue'
+export default {
+  components: {
+    editBtn
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    sort:{
+      type:Number,
+      default:0
+    }
+  },
+  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: 50px;
+        }
+      }
+      
+     
+    }
+  }
+</style>
+

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

@@ -0,0 +1,90 @@
+<template>
+  <div :class="['headTopBox', { componentBorder: this.$store.state.template.previewStatus==false }]">
+    <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">
+  .componentBorder {
+    border: 2px dashed #999;
+  }
+  .headTopBox {
+    width: 80%;
+    height: 190px;
+    .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/sector/10.vue

@@ -0,0 +1,110 @@
+<template>
+  <div :class="['friendShipLinkSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+    <div :class="['friendShipLinkSectorTitle', {componentBorder: $store.state.template.previewStatus==false}]">
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="7" :size="1" :y="y"/>
+      <convertBtn :id="id" :dataSort="dataSort" :sort="0" :type="2"/>
+      <!--index页面-->
+      <div v-if="this.$store.state.template.pageStatus == 1">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[0].component_style == 1">
+          <title1Style />
+        </div>
+      </div>
+      <!--list页面-->
+      <div v-if="this.$store.state.template.pageStatus == 3">
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[0].component_style == 1">
+          <title1Style />
+        </div>
+      </div>
+      <!--article页面-->
+      <div v-if="this.$store.state.template.pageStatus == 4">
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[0].component_style == 1">
+          <title1Style />
+        </div>
+      </div>
+    </div>
+    <div :class="['friendShipLinkSectorItemBox', {componentBorder: $store.state.template.previewStatus==false}]">
+      <editBtn :id="id" :dataSort="dataSort" :sort="1" :type="4" :size="1" :y="y"/>
+      <convertBtn :id="id" :dataSort="dataSort" :sort="1" :type="9"/>
+      <!--index页面-->
+      <div v-if="this.$store.state.template.pageStatus == 1">
+        <div v-if="this.$store.state.template.pageData.index[dataSort].content.componentList[1].component_style == 1">
+          <link1Style />
+        </div>
+      </div>
+      <!--list页面-->
+      <div v-if="this.$store.state.template.pageStatus == 3">
+        <div v-if="this.$store.state.template.pageData.list[dataSort].content.componentList[1].component_style == 1">
+          <link1Style />
+        </div>
+      </div>
+      <!--article页面-->
+      <div v-if="this.$store.state.template.pageStatus == 4">
+        <div v-if="this.$store.state.template.pageData.article[dataSort].content.componentList[1].component_style == 1">
+          <link1Style />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//编辑按钮
+import editBtn from '../../public/editBtn.vue'
+import convertBtn from '../../public/convertBtn.vue'
+//标题组件
+import title1Style from '../components/title/1.vue'
+//友情链接组件
+import link1Style from '../components/link/1.vue'
+
+export default {
+  components: {
+    editBtn,
+    convertBtn,
+    title1Style,
+    link1Style
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    y:{
+      type:Number,
+      default:0
+    },
+    dataSort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .friendShipLinkSectorBox {
+    height:180px;
+    .componentBorder{
+      border: 2px dashed #999;
+    }
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .friendShipLinkSectorTitle {
+      width: 80%;
+      //border: 2px dashed #999;
+      position: relative;
+    }
+    .friendShipLinkSectorItemBox {
+      width: 80%;
+      margin-top: 20px;
+      //border: 2px dashed #999;
+      position: relative;
+    }
+  }
+</style>

src/views/template/style/sector/11.vue

@@ -0,0 +1,63 @@
+<template>
+  <div :class="['listSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
+    <div :class="['listSectorMainBox', {componentBorder: $store.state.template.previewStatus==false}]">
+      <editBtn :id="id" :dataSort="dataSort" :sort="0" :type="1" :size="15" :y="y"/>
+      <convertBtn :id="id" :sort="0" :type="10"/>
+      <list1Style />
+    </div>
+  </div>
+</template>
+
+<script>
+import editBtn from '../../public/editBtn.vue'
+import convertBtn from '../../public/convertBtn.vue'
+import list1Style from '../components/mainList/1.vue'
+
+export default {
+  components: {
+    editBtn,
+    convertBtn,
+    list1Style
+  },
+  props: {
+    id:{
+      type:Number,
+      default:0
+    },
+    y:{
+      type:Number,
+      default:0
+    },
+    dataSort:{
+      type:Number,
+      default:0
+    }
+  },
+  data() {
+    return {
+      
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .listSectorBox {
+    width: 100%;
+    height: 900px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .componentBorder{
+      border: 2px dashed #999;
+    }
+    .listSectorMainBox {
+      width: 80%;
+      height: 900px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+    }
+  }
+</style>