完成list和article页面

完成list和article页面

src/layout/components/template/pages/article/sector.vue

@@ -6,7 +6,7 @@
       </div>
       <div class="sectorItemTitle">通栏广告</div>
     </div>
-    <div class="sectorItemBox" @click="addModule('listSector',33,listSector)" @drag="drag('listSector',33,listSector)" @dragend="dragend('listSector',33,listSector)" >
+    <div class="sectorItemBox" @click="addModule('mainArticle',122,mainArticle)" @drag="drag('mainArticle',33,mainArticle)" @dragend="dragend('mainArticle',33,mainArticle)" >
       <div class="sectorItem">
         <img src="@/assets/template/sector/articleSector.png"/>
       </div>
@@ -298,9 +298,31 @@ export default {
             componentData:{}
           }
         ]
-      }
+      },
       //友情链接板块 end---------------------------------------->
 
+      //文章详情板块 start---------------------------------------->
+      mainArticle:{
+        sectorName:"mainArticle",//主文章列表
+        componentList:[
+          {
+            component_type:9, //页面必备组件
+            component_style:1, //文章详情
+            component_name:"mainArticle",
+            sort:1,
+            componentData:{
+              category_id:[], //文章详情
+              page:1,
+              pageSize:1,
+              listType:[
+                "details"//文章详情
+              ]
+            }
+          },
+        ]
+      }
+      //文章详情板块 end---------------------------------------->
+
     }
   },
   methods: {

src/layout/components/template/pages/list/sector.vue

@@ -132,7 +132,7 @@ export default {
         sectorName:"mainListSector",//主文章列表
         componentList:[
           {
-            component_type:1, //1=新闻(单个)
+            component_type:9, //页面必备组件类型
             component_style:1,
             component_name:"listMain",
             sort:1,

src/views/template/page/pageArticle.vue

@@ -70,6 +70,10 @@
             <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
               <friendShipLinkSector :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
             </div>
+            <!-- 11.文章详情 --> 
+            <div v-if="item.type == 'mainArticle'" class="moduleBox">
+              <mainArticle :dataSort="item.dataSort" :id="item.i" :y="item.y"/>
+            </div>
           </div>
         </grid-item>
       </grid-layout>
@@ -100,6 +104,7 @@ import listSector from '../style/1/sector/8.vue';//文章列表
 import onlyImgSector from '../style/1/sector/9.vue';//纯图片组合
 import friendShipLinkSector from '../style/1/sector/10.vue';//友情链接
 import footerSector from '../style/1/sector/3.vue';//底部
+import mainArticle from '../style/1/sector/12.vue';//文章详情
 //自助建站组件 end------------------------------------------------------------>
 
 
@@ -117,7 +122,8 @@ export default {
     listSector,
     onlyImgSector,
     friendShipLinkSector,
-    footerSector
+    footerSector,
+    mainArticle
   },
   data() {
     return {

src/views/template/public/componentWindow.vue

@@ -194,7 +194,6 @@
           </table>
         </div>
         <!--9.友情链接组件 end---------------------------------------->
-
         <!--10.列表页-主文章列表 start---------------------------------------->
         <div v-if="this.$store.state.template.editComponentType == 10" class="componentScrollBox">
           <table>
@@ -208,7 +207,19 @@
           </table>
         </div>
         <!--10.列表页-主文章列表 end---------------------------------------->
-
+        <!--11.详情页-主文章详情 start---------------------------------------->
+        <div v-if="this.$store.state.template.editComponentType == 11" class="componentScrollBox">
+          <table>
+            <tr>
+              <td>
+                <div :class="['componentScrollBoxItem', this.$store.state.template.editComponentStyle === 1 ? 'active' : '']" @click="selectUseStyleNumber(1)">
+                  <img src="@/assets/template/component/article/article1style.png"/>
+                </div>
+              </td>
+            </tr>
+          </table>
+        </div>
+        <!--11.详情页-主文章详情 end---------------------------------------->
       </div>
     </div>
     <div class="componentWindowBoxFooter">
@@ -275,8 +286,10 @@ export default {
           margin-right: 10px;
           background: #F5F7FB;
           border:1px solid #F5F7FB;
+          overflow: hidden;
           img {
-            width: 100%;
+            width: 200px;
+            display: block;
           }
           &:hover {
             border:1px solid #19499F;

src/views/template/public/editWindow.vue

@@ -43,6 +43,7 @@
             <div v-if="this.$store.state.template.editComponentType == 6">静态html组件</div>
             <div v-if="this.$store.state.template.editComponentType == 7">文本</div>
             <div v-if="this.$store.state.template.editComponentType == 8">评论组件</div>
+            <div v-if="this.$store.state.template.editComponentType == 9">页面必备组件</div>
           </div>
           <div class="testAssistantContentItem">
             <div>展示条数:</div>
@@ -141,6 +142,14 @@
           </el-form-item>
         </el-form>
       </div>
+      <!--9.页面必备组件-->
+      <div v-if="this.$store.state.template.editComponentType == 9">
+        <el-form :model="form.type7data" ref="form" :rules="formRules" autocomplete="off" label-position="left">
+          <el-form-item label="组件类型：" :label-width="formLabelWidth" class="custom-align-right">
+            <el-input value="页面必备组件不支持编辑" disabled/>
+          </el-form-item>
+        </el-form>
+      </div>
     </div>
     <div class="editWindowBoxFooter">
       <el-button type="info" @click="closeEditWindow">取消</el-button>

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

@@ -0,0 +1,85 @@
+<template>
+  <div class="mainAricleTextBox">
+    <div class="mainAricleTextTitle">各地加强部署落实2023年全国农产品质量安全监管工作会议要求</div>
+    <div class="mainArticleMore">
+      <div>来源:农业农村部</div>
+      <div>日期:2025-01-19 20:56</div>
+      <div>浏览次数:347</div>
+    </div>
+    <div class="mainArticleDetails">
+      <div><img src="@/assets/template/component/articleImg.png" /></div>
+      <div>3月21日，2023年全国农产品质量安全监管工作会议在云南昆明召开，马有祥副部长出席并讲话。会后，各地农业农村部门高度重视，迅速行动，结合本地实际扎实推进农产品质量安全各项工作。</div>
+      <div>一、深入学习会议精神，加强工作部署安排。各地农业农村部门迅速传达会议精神，紧盯重点、凝心聚力，强化工作部署。</div>
+      <div>一是及时汇报传达。吉林、河南及时向省政府汇报会议精神，省政府将农产品质量安全监管工作作为重点工作推进。四川、广西、天津等地召开省级监管工作会议，福建、吉林畜牧、内蒙古农牧、大连等地第一时间向负责人呈报会议精神和初步贯彻意见报告，将农产品质量安全工作作为厅重点工作共同推进。</div>
+      <div>二是压实工作责任。上海、山西、北京、青岛等地结合《2023年农产品质量安全监管工作要点》重点任务，形成印发2023年全省(市)农产品质量安全监管工作要点。黑龙江将会议精神及全国各地网格化管理经验材料、典型发言材料汇编印发全省各市县深入学习。辽宁与各市签订2023年农产品质量安全监管工作目标责任状，全面推进农产品质量安全监管工作。</div>
+      <div>三是加强调查研究。广东印发关于开展全省农产品质量安全大调研工作的通知，成立调研工作小组开展农产品质量安全调研指导工作。西藏4月初赴拉萨曲水县开展调研，深入县级监测站、蔬菜种植基地，对豇豆种植管理情况开展专题调研，向群众宣传规范购药、用药知识。</div>
+      <div>二、聚焦重点品种，全力抓好农产品质量安全监管工作。</div>
+      <div>一是集中力量解决豇豆农残问题。各地根据会议精神，加强组织领导，坚持产管并重、疏堵结合，推动豇豆治理工作。海南省政府分管领导亲自挂帅、靠前指挥，组织各市县各市县负责同志深入田间地头召开虹豆现场会，层层压实责任，并推行“防虫网+”种植模式、半定量检测、赋码追溯等措施，加强豇豆上市前和出岛把关。云南、陕西等地成立豇豆领导小组和专家指导专班，突出重点地区、重点时节、重点问题印发分片包抓通知，强化部省市联动，压实属地责任。江西召开全省豇豆农药残留突出问题攻坚治理工作推进视频会议，做到精准指导、精准抽检、精准监管、精准督促。</div>
+      <div>二是持续强化监测预警。各地根据会议精神，印发省级农产品质量安全监测工作通知，明确2023年定量监测总数量不少于1.7批次千人，加强农产品质量安全风险监测结果分析。湖南分解落实定量检测任务14万批次，达到2批次/千人的标准。江苏印发省级农产品质量安全专项风险监测白皮书，并收集了2022年11月-2023年3月全省草莓监测数据，汇总成“草莓质量安全风险提示'</div>
+      <div>三是加大农资打假力度。3月23-24日贵州省农业农村厅、市场监管局、公安厅联合检查黔东南州农资打假整治工作，查获一批问题农资，当地执法部门当场登记查封，立案查处。4月上旬，山西运城开展放心农资下乡进村宣传活动，加强对农民群众的宣传教育和风险提醒，提高识假辨假和依法维权意识。</div>
+      <div>三、提高全民安全意识，推进农产品高质量发展。</div>
+      <div>一是加强法律法规宣传。多地坚持以活动促宣传，推动形成社会共治局面。四川启动开展“百县千乡万户”普法守法安全用药大实训。山东畜牧常态化推进“畜产品质量安全知识进万家”“消费者体验日”“实验室开放日”等活动，正向引导社会工作消费观。</div>
+      <div>二是推动农产品标准化优质化发展。各地根据会议部署安排，用技术标准引领，增加优质农产品供给。河北推进衡沧高品质蔬菜产业示范建设，制定主栽品种全产业链标准体系，围绕饶阳西红柿等10个典型品种，开展品质指标体系构建。甘肃加强与兰州海关协作通过共建农产品质量安全监管体系，推动甘肃省特色优质农产品扩大进出口。</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    
+  },
+  data() {
+    return {
+      
+    };
+  },
+  methods: {
+    
+  },
+  mounted() {
+    
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .mainAricleTextBox {
+    .mainAricleTextTitle {
+      font-size: 24px;
+      color: #333333;
+      padding-bottom: 30px;
+      text-align: center;
+      padding-top: 40px;
+      padding-bottom: 40px;
+    }
+    .mainArticleMore {
+      color: #999;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-bottom: 20px;
+      div {
+        margin-right: 30px;
+      }
+    }
+    .mainArticleDetails {
+      border-top: 1px solid #D9D9D9;
+      padding-top: 40px;
+      div {
+        text-indent: 2em;
+        margin-bottom: 20px;
+        &:last-child{
+          margin-bottom: 0;
+        }
+      }
+      img {
+        display: block;
+        margin: 0 auto;
+        width: 500px;
+        margin-bottom: 40px;
+      }
+    }
+  }
+</style>

src/views/template/style/1/sector/12.vue

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