修改样式

修改样式

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

@@ -12,43 +12,43 @@
       </div>
       <div class="sectorItemTitle">网站导航</div>
     </div> -->
-    <div class="sectorItemBox" @click="addModule('imgTitleSector',6,imgTitleSector)">
+    <div class="sectorItemBox" @click="addModule('imgTitleSector',8,imgTitleSector)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/imgTitleSector.png"/>
       </div>
       <div class="sectorItemTitle">通栏广告</div>
     </div>
-    <div class="sectorItemBox" @click="addModule('bannerSector',34,bannerSector)">
+    <div class="sectorItemBox" @click="addModule('bannerSector',33,bannerSector)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/bannerSector.png"/>
       </div>
       <div class="sectorItemTitle">焦点图</div>
     </div>
-    <div class="sectorItemBox" @click="addModule('manyPictureSector',46,manyPictureSector)">
+    <div class="sectorItemBox" @click="addModule('manyPictureSector',49,manyPictureSector)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/moreServicesSector.png"/>
       </div>
       <div class="sectorItemTitle">多图菜单</div>
     </div>
-    <div class="sectorItemBox" @click="addModule('commentSector',40,commentSector)">
+    <div class="sectorItemBox" @click="addModule('commentSector',44,commentSector)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/commentSector.png"/>
       </div>
       <div class="sectorItemTitle">文章列表带评论</div>
     </div>
-    <div class="sectorItemBox" @click="addModule('listSector',28,listSector)">
+    <div class="sectorItemBox" @click="addModule('listSector',33,listSector)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/newsSector.png"/>
       </div>
       <div class="sectorItemTitle">文章列表</div>
     </div>
-    <div class="sectorItemBox" @click="addModule('onlyImgSector',24,onlyImgSector)">
+    <div class="sectorItemBox" @click="addModule('onlyImgSector',32,onlyImgSector)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/imgSector.png"/> 
       </div>
       <div class="sectorItemTitle">纯图片组合</div>
     </div>
-    <div class="sectorItemBox" @click="addModule('friendShipLinkSector',15,friendShipLinkSector)">
+    <div class="sectorItemBox" @click="addModule('friendShipLinkSector',20,friendShipLinkSector)">
       <div class="sectorItem">
         <img src="@/assets/template/sector/linkSector.png"/>
       </div>

src/store/modules/template.js

@@ -365,6 +365,27 @@ const mutations = {
     
     console.log(state.webSiteData);
   },
+  //随机生成模板
+  randomTemplate(state){
+    console.log("随机生成模板");
+    const randomIndex = Math.floor(Math.random() * 9) + 1; // Generates a random number between 1 and 2
+    console.log(`随机生成的数字是: ${randomIndex}`);
+
+    // pageStatus == 1 首页
+    if (state.pageStatus == 1) {}
+    // pageStatus == 2 分类页
+    if (state.pageStatus == 2) {}
+    // pageStatus == 3 列表页
+    if (state.pageStatus == 3) {}
+    // pageStatus == 4 详情页
+    if (state.pageStatus == 4) {}
+    // pageStatus == 5 搜索页
+    if (state.pageStatus == 5) {}
+    // pageStatus == 6 自定义列表页
+    if (state.pageStatus == 6) {}
+    // pageStatus == 7 自定义详情页
+    if (state.pageStatus == 7) {}
+  },
   //1.配置模块 end------------------------------------------------------------>
 
   //2.获取站点信息 start------------------------------------------------------------>

src/styles/global.less

@@ -303,6 +303,11 @@
 }
 /*测试助手 正式版本移除 end------------------------------------------------------------>*/
 
+//自助建站 构建虚线
+.buildingBorder {
+  border: 2px dashed #eee;
+}
+
 
 /*页面布局 end------------------------------------------------------------>*/
 

src/views/chat/creatTopic.vue

@@ -274,7 +274,7 @@ export default {
         this.form.content = res.data.content;
         this.form.is_group = res.data.is_group;
         this.form.group_name = res.data.group_name;
-        this.form.author = res.data.user_name;
+        this.form.author = res.data.author;
         //如果已经创建了群聊，阻止其修改
         if(res.data.is_group=="1"){
           this.groupStatus = true;

src/views/template/page/pageIndex.vue

@@ -29,31 +29,31 @@
             <menuSector :id="item.i"/>
           </div> -->
           <!-- 图片标题模块 --><!--4-->
-          <div v-if="item.type == 'imgTitleSector'" :class="['moduleBox', {FixedMainModuleBoxBorder: $store.state.template.previewStatus==false}]">
+          <div v-if="item.type == 'imgTitleSector'" class="moduleBox">
             <imgTitleSector :id="item.i"/>
           </div>
           <!-- 焦点图模块 --><!--5-->
-          <div v-if="item.type == 'bannerSector'" :class="['moduleBox', {FixedMainModuleBoxBorder: $store.state.template.previewStatus==false}]">
+          <div v-if="item.type == 'bannerSector'" class="moduleBox">
             <bannerSector :id="item.i"/>
           </div>
           <!-- 多图模块 --><!--6-->
-          <div v-if="item.type == 'manyPictureSector'" :class="['moduleBox', {FixedMainModuleBoxBorder: $store.state.template.previewStatus==false}]">
+          <div v-if="item.type == 'manyPictureSector'" class="moduleBox">
             <manyPictureSector :id="item.i"/>
           </div>
           <!-- 评论模块 --><!--7-->
-          <div v-if="item.type == 'commentSector'" :class="['moduleBox', {FixedMainModuleBoxBorder: $store.state.template.previewStatus==false}]">
+          <div v-if="item.type == 'commentSector'" class="moduleBox">
             <commentSector :id="item.i"/>
           </div>
           <!-- 双联文章列表模块 --> 
-          <div v-if="item.type == 'listSector'" :class="['moduleBox', {FixedMainModuleBoxBorder: $store.state.template.previewStatus==false}]">
+          <div v-if="item.type == 'listSector'" class="moduleBox">
             <listSector :id="item.i"/>
           </div>
           <!-- 纯图片组合模块 --> 
-          <div v-if="item.type == 'onlyImgSector'" :class="['moduleBox', {FixedMainModuleBoxBorder: $store.state.template.previewStatus==false}]">
+          <div v-if="item.type == 'onlyImgSector'" class="moduleBox">
             <onlyImgSector :id="item.i"/>
           </div>
           <!-- 友情链接模块 --> 
-          <div v-if="item.type == 'friendShipLinkSector'" :class="['moduleBox', {FixedMainModuleBoxBorder: $store.state.template.previewStatus==false}]">
+          <div v-if="item.type == 'friendShipLinkSector'" class="moduleBox">
             <friendShipLinkSector :id="item.i"/>
           </div>
           <!-- 页尾板块 --> 
@@ -63,7 +63,7 @@
         </div>
       </grid-item>
     </grid-layout>
-    <div class="FixedModuleBox">
+    <div class="FixedModuleBoxBottom">
       <footerSector />
     </div>
   </div>
@@ -185,8 +185,12 @@ export default {
   //固定的模块
   .FixedModuleBox {
     width: 100%;
+    margin-bottom: 20px;
     //border: 2px dashed #eee;
   }
+  .FixedModuleBoxBottom {
+    width: 100%;
+  }
   .FixedMainModuleBox {
     width: 100%;
     font-size: 18px;
@@ -196,7 +200,8 @@ export default {
       margin-bottom: 20px;
     }
     padding: 100px;
-    background: #F5F7FB;
+    //background: #F5F7FB;
+    margin-bottom: 20px;
   }
   .FixedMainModuleBoxBorder {
     border: 2px dashed #eee;

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

@@ -26,10 +26,11 @@ export default {
 <style scoped lang="less">
   .advertisementBox {
     width: 100%;
-    height: 60px;
+    height: 58px;
     img {
       width: 100%;
-      height: 60px;
+      height: 58px;
+      display: block;
     }
   }
 </style>

src/views/template/style/1/components/advertisement/2.vue

@@ -26,10 +26,11 @@ export default {
 <style scoped lang="less">
   .advertisementBox {
     width: 100%;
-    height: 60px;
+    height: 58px;
     img {
       width: 100%;
-      height: 60px;
+      height: 58px;
+      display: block;
     }
   }
 </style>

src/views/template/style/1/components/advertisement/3.vue

@@ -26,10 +26,11 @@ export default {
 <style scoped lang="less">
   .advertisementBox {
     width: 100%;
-    height: 60px;
+    height: 58px;
     img {
       width: 100%;
-      height: 60px;
+      height: 58px;
+      display: block;
     }
   }
 </style>

src/views/template/style/1/components/advertisement/4.vue

@@ -26,10 +26,11 @@ export default {
 <style scoped lang="less">
   .advertisementBox {
     width: 100%;
-    height: 60px;
+    height: 58px;
     img {
       width: 100%;
-      height: 60px;
+      height: 58px;
+      display: block;
     }
   }
 </style>

src/views/template/style/1/components/staticHtml/2.vue

@@ -54,12 +54,13 @@ export default {
     align-items: center;
     //border: 2px dashed #999;
     position: relative;
+    height: 300px;
     img {
       width: 100%;
       display: block;
     }
     .onlyImgSectorItemBox1, .onlyImgSectorItemBox2, .onlyImgSectorItemBox3 {
-      height:320px;
+      height: 300px;
       box-sizing: border-box;
     }
     .onlyImgSectorItemBox2 {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="friendShipLinkSectorBox">
+  <div :class="['friendShipLinkSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div :class="['friendShipLinkSectorTitle', {componentBorder: $store.state.template.previewStatus==false}]">
       <editBtn :id="id" :sort="0" :type="7" :size="1"/>
       <convertBtn :id="id" :sort="0" :type="2"/>
@@ -63,6 +63,7 @@ export default {
     }
     .friendShipLinkSectorItemBox {
       width: 80%;
+      margin-top: 20px;
       //border: 2px dashed #999;
       position: relative;
     }

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

@@ -93,6 +93,7 @@ export default {
 <style scoped lang="less">
   .menuSectorBox {
     width: 100%;
+    background: #F5F7FB;
     .menuBoxBg {
       width: 100%;
       background: #19499F;
@@ -131,9 +132,14 @@ export default {
       width: 80%;
       margin: 0 auto;
       border-top: none;
+      height: 50px;
       .menuSectorInputBoxItem {
-        .el-input {
-          width: 100px;
+        padding: 0 10px;
+        input{
+          margin-right: 10px;
+        }
+        .el-select {
+          margin-right: 10px;
         }
       }
     }
@@ -143,7 +149,10 @@ export default {
   }
   //执行v-deep穿透scope选择器 start------------------------------------------------------------>*/
   ::v-deep .menuSectorInputBox .menuSectorInputBoxItem .el-input {
-    width: 100px !important;
+    width: 130px !important;
+  }
+  ::v-deep .el-input--medium .el-input__inner {
+    border-radius: 20px;
   }
   //执行v-deep穿透scope选择器 end------------------------------------------------------------>*/
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="imgTitleSectorBox">
+  <div :class="['imgTitleSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div class="imgSectorBox">
       <editBtn :id="id" :sort="0" :type="3" :size="1"/>
       <convertBtn :id="id" :sort="0" :type="3"/>
@@ -53,9 +53,11 @@ export default {
 <style scoped lang="less">
   .imgTitleSectorBox {
     width: 100%;
+    height: auto;
     display: flex;
     justify-content: center;
-    align-items: center;
+    align-items: flex-start;
+    height: 60px;
     .imgSectorBox {
       //border: 2px dashed #999;
       width: 80%;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="bannerBox">
+  <div :class="['bannerBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div :class="['itemTopBox', {componentBorder: $store.state.template.previewStatus==false}]">
       <editBtn :id="id" :sort="0" :type="6" :size="1"/>
       <convertBtn :id="id" :sort="0" :type="1"/>
@@ -89,14 +89,13 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
-    height: 340px;
+    height: 314px;
     .componentBorder{
       border: 2px dashed #999;
     }
     .itemTopBox {
       position: relative;
       //border: 2px dashed #999;
-      transition: all 0.3s;
       width: 80%;
     }
     .itemBottomBox {
@@ -105,7 +104,7 @@ export default {
       align-items: center;
       justify-content: space-between;
       padding: 14px 0 0 0;
-      height: 300px;
+      padding-top: 20px;
       .bannerLayerBox {
         position: relative;
         //border: 2px dashed #999;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="manyPictureSectorBox">
+  <div :class="['manyPictureSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div :class="['manyPictureSectorBoxTitle', {componentBorder: $store.state.template.previewStatus==false}]">
       <editBtn :id="id" :sort="0" :type="7" :size="1"/>
       <convertBtn :id="id" :sort="0" :type="2"/>
@@ -96,6 +96,7 @@ export default {
     align-items: center;
     width:100%;
     position: relative;
+    height: 475px;
     .componentBorder{
       border: 2px dashed #999;
     }

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="commentSectorBox">
+  <div :class="['commentSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div :class="['commentSectorBoxTitle', {componentBorder: $store.state.template.previewStatus==false}]">
       <editBtn :id="id" :sort="0" :type="7" :size="1"/>
       <convertBtn :id="id" :sort="0" :type="2"/>
@@ -77,6 +77,7 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
+    height: 420px;
     .componentBorder{
       border: 2px dashed #999;
     }
@@ -88,10 +89,11 @@ export default {
     .commentSectorBoxContent {
       width: 80%;
       display: flex;
+      padding-top: 20px;
       .tabsCalendarNewsBox {
         width: 70%;
         box-sizing: border-box;
-        padding-right: 20px;
+        margin-right: 20px;
         position: relative;
       }
       .calendarBox {

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="listSectorBox">
+  <div :class="['listSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div :class="['listSectorBoxTitle', {componentBorder: $store.state.template.previewStatus==false}]">
       <editBtn :id="id" :sort="0" :type="7" :size="1"/>
       <convertBtn :id="id" :sort="0" :type="2"/>
@@ -7,8 +7,8 @@
         <title1Style />
       </div>
     </div>
-    <div :class="['listSectorBoxContent', {componentBorder: $store.state.template.previewStatus==false}]">
-      <div class="listNewsLeft">
+    <div class="listSectorBoxContent">
+      <div :class="['listNewsRight', {componentBorder: $store.state.template.previewStatus==false}]">
         <editBtn :id="id" :sort="1" :type="1" :size="5"/>
         <convertBtn :id="id" :sort="1" :type="6"/>
         <div v-if="this.$store.state.template.pageData.index[id].content.componentList[1].component_style == 1">
@@ -94,6 +94,7 @@ export default {
       align-items: center;
       justify-content: space-between;
       width: 80%;
+      margin-top: 20px;
       .listNewsLeft {
         width: 50%;
         box-sizing: border-box;

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="onlyImgSectorBox">
+  <div :class="['onlyImgSectorBox', {buildingBorder: this.$store.state.template.previewStatus==false}]">
     <div class="onlyImgSectorPositionBox">
       <editBtn :id="id" :sort="0" :type="6" :size="1"/>
       <!-- <convertBtn :id="id" :sort="0" :type="3"/> -->
@@ -39,9 +39,13 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+    height: 300px;
     .onlyImgSectorPositionBox {
       width: 80%;
-      height: 100%;
+      height: 300px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       position: relative;
     }
   }

src/views/template/templateCreat.vue

@@ -3,7 +3,7 @@
     <!-- 顶部菜单 start ---------------------------------------->
     <div class="topMenuBox">
       <div>
-        <!-- <el-button icon="el-icon-refresh" type="primary">随机生成</el-button> -->
+        <el-button icon="el-icon-refresh" type="primary" @click="randomTemplate">随机生成</el-button>
       </div>
       <div class="topMenuRightBox">
         <img src="@/assets/template/preview.png" class="previewImg" @click="setPreviewStatus" v-if="this.$store.state.template.previewStatus==false"/>
@@ -124,6 +124,10 @@ export default {
     setPreviewStatus(){
       this.$store.commit('template/setPreviewStatus');
     },
+    //随机生成模板
+    randomTemplate(){
+      this.$store.commit('template/randomTemplate');
+    },
     //0.全局操作 end ------------------------------------------------------------>
   },
   mounted(){
@@ -162,7 +166,7 @@ export default {
     margin: 60px 30px 30px 30px;
     background: #fff;
     border: 1px solid #E9EDF7;
-    padding: 20px 0 20px 0;
+   
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     position: relative;