feat: 修改界面样式

src/App.vue

@@ -69,7 +69,7 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="less">
 #app {
   position: absolute;
   left: 0;
@@ -91,4 +91,7 @@ export default {
   transform: translateX(5px);
   opacity: 0;
 }
+.el-message-box.JSONView{
+  width: 1100px;
+}
 </style>

src/assets/iconfont/demo_index.html

@@ -362,7 +362,7 @@
           
             <li class="dib">
               <span class="icon iconfont">&#xe610;</span>
-                <div class="name">店铺笔记卡片</div>
+                <div class="name">文章模块</div>
                 <div class="code-name">&amp;#xe610;</div>
               </li>
           
@@ -1046,7 +1046,7 @@
           <li class="dib">
             <span class="icon iconfont icon-dianpubijikapian"></span>
             <div class="name">
-              店铺笔记卡片
+              文章模块
             </div>
             <div class="code-name">.icon-dianpubijikapian
             </div>
@@ -1723,7 +1723,7 @@
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-dianpubijikapian"></use>
                 </svg>
-                <div class="name">店铺笔记卡片</div>
+                <div class="name">文章模块</div>
                 <div class="code-name">#icon-dianpubijikapian</div>
             </li>
           

src/assets/iconfont/iconfont.json

@@ -392,7 +392,7 @@
     },
     {
       "icon_id": "13319817",
-      "name": "店铺笔记卡片",
+      "name": "文章模块",
       "font_class": "dianpubijikapian",
       "unicode": "e610",
       "unicode_decimal": 58896

src/components/rightslider/custommodulestyle/index.vue

@@ -4,7 +4,7 @@
     <h2>{{ datas.text }}</h2>
     <el-input v-model="datas.demo" placeholder="请输入公告" />
     <el-input v-model="datas.img" placeholder="图片地址" />
-        {{ 'aaa'+ data-type}}
+        {{ 'aaa'+ datas.type}}
 
   </div>
 </template>

src/components/rightslider/investigatestyle/index.vue

@@ -25,7 +25,7 @@
         <el-input
           v-model="item.name"
           class="title"
-          placeholder="调研名称"
+          placeholder="表单模块名称"
         ></el-input>
         <el-select
           v-model="item.type"

src/components/sliderassembly/index.vue

@@ -16,7 +16,8 @@
           v-for="(item, ind) in items.comList"
           :key="ind"
         >
-          <i class="iconfont" :class="item.icon" />
+          <i class="iconfont" :class="item.icon"  v-if="item.icon" />
+          <van-icon :name="item.vanIcon" v-else />
           <p>{{ item.text }}</p>
         </div>
       </el-collapse-item>
@@ -38,17 +39,18 @@ export default {
           title: '基础组件',
           comList: [
             {
-              text: '标题文本',
+              text: '商品搜索',
               type: '1-1',
+              icon: 'icon-shangpinsousuo',
+              name: 'commoditysearch',
+            },
+            {
+              text: '标题文本',
+              type: '1-3',
               icon: 'icon-Component-biaotiwenzi',
               name: 'captiontext',
             },
-            {
+
-              text: '商品',
-              type: '1-2',
-              icon: 'icon-goods',
-              name: 'listswitching',
-            },
             {
               text: '图片广告',
               type: '1-3',
@@ -62,10 +64,10 @@ export default {
               name: 'graphicnavigation',
             },
             {
-              text: '富文本',
+              text: '底部导航',
               type: '1-5',
-              icon: 'icon-fuwenben',
+              icon: 'icon-daohang',
-              name: 'richtext',
+              name: 'tabBar',
             },
             {
               text: '魔方',
@@ -73,211 +75,118 @@ export default {
               icon: 'icon-mofang',
               name: 'magiccube',
             },
-            {
-              text: '辅助分割',
-              type: '1-7',
-              icon: 'icon-Component-fuzhufenge',
-              name: 'auxiliarysegmentation',
-            },
-            {
-              text: '商品搜索',
-              type: '1-8',
-              icon: 'icon-shangpinsousuo',
-              name: 'commoditysearch',
-            },
-            {
-              text: '店铺信息',
-              type: '1-9',
-              icon: 'icon-dianpuxinxi',
-              name: 'storeinformation',
-            },
-            {
-              text: '进入店铺',
-              type: '1-10',
-              icon: 'icon-jinrudianpu',
-              name: 'entertheshop',
-            },
             {
               text: '公告',
-              type: '1-11',
+              type: '1-7',
               icon: 'icon-gonggao',
               name: 'notice',
             },
+            
             {
               text: '视频',
-              type: '1-12',
+              type: '1-8',
               icon: 'icon-shipin',
               name: 'videoss',
             },
             {
               text: '音频',
-              type: '1-13',
+              type: '1-9',
               icon: 'icon-yuyin',
               name: 'voicer',
             },
+            {
+              text: '富文本',
+              type: '1-10',
+              icon: 'icon-fuwenben',
+              name: 'richtext',
+            },
+            {
+              text: '辅助分割',
+              type: '1-11',
+              icon: 'icon-Component-fuzhufenge',
+              name: 'auxiliarysegmentation',
+            },
 
+            {
+              text: '店铺信息',
+              type: '1-12',
+              icon: 'icon-dianpuxinxi',
+              name: 'storeinformation',
+            },
+            {
+              text: '进入店铺',
+              type: '1-13',
+              icon: 'icon-jinrudianpu',
+              name: 'entertheshop',
+            },            
             {
               text: '社群涨粉',
-              type: '1-15',
+              type: '1-14',
               icon: 'icon-kuaisuzhangfen',
               name: 'communitypowder',
             },
-            {
-              text: '店铺笔记卡片',
-              type: '1-16',
-              icon: 'icon-dianpubijikapian',
-              name: 'storenotecard',
-            },
             /* {
-              text: '人群运营',
+              text: 'xxx',
               type: '1-17',
               icon: 'icon-yunying',
               name: ''
             }, */
             /* {
-              text: '在线客服',
+              text: 'xxx',
               type: '1-19',
               icon: 'icon-weibiaoti-_huaban',
               name: ''
             }, */
             /* {
-              text: '个性化推荐',
+              text: 'xxxx',
               type: '1-18',
               icon: 'icon-gexinghuatuijian',
               name: ''
             }, */
-            {
-              text: '调研',
-              type: '1-20',
-              icon: 'icon-dianpubijikapian',
-              name: 'investigate',
-            },
-            {
-              text: '导航',
-              type: '1-21',
-              icon: 'icon-daohang',
-              name: 'tabBar',
-            },
             {
               text: '关注公众号',
-              type: '1-22',
+              type: '1-15',
               icon: 'icon-gongzhonghao',
               name: 'follow',
             },
             {
               text: '悬浮',
-              type: '1-23',
+              type: '1-16',
               icon: 'icon-wangye',
               name: 'suspension',
             },
             {
               text: '自定义模块',
-              type: '1-13',
+              type: 'demo',
               icon: 'icon-zidingyimokuai',
               name: 'custommodule'
             }, 
           ],
         },
-        /* {
+        {
-          title: '营销组件',
+          title: '业务组件',
           comList: [
             {
-              text: '优惠券',
+              text: '商品',
               type: '2-1',
-              icon: 'icon-youhuiquan',
+              icon: 'icon-goods',
-              name: ''
+              name: 'listswitching',
             },
             {
-              text: '限时折扣',
+              text: '文章模块',
               type: '2-2',
-              icon: 'icon-xianshizhekou',
+              icon: 'icon-dianpubijikapian',
-              name: ''
+              name: 'storenotecard',
             },
             {
-              text: '秒杀',
+              text: '表单模块',
               type: '2-3',
-              icon: 'icon-miaosha',
+              vanIcon: 'orders-o',
-              name: ''
+              name: 'investigate',
-            },
-            {
-              text: '拼团',
-              type: '2-4',
-              icon: 'icon-pintuan-copy',
-              name: ''
-            },
-            {
-              text: '砍价',
-              type: '2-5',
-              icon: 'icon-kanjia',
-              name: ''
-            },
-            {
-              text: '周期购',
-              type: '2-6',
-              icon: 'icon-zhouqi',
-              name: ''
-            },
-            {
-              text: '积分商城',
-              type: '2-7',
-              icon: 'icon-jifenzhang',
-              name: ''
             }
           ]
         },
-        {
+
-          title: '教育组件',
-          comList: [
-            {
-              text: '课程',
-              type: '3-1',
-              icon: 'icon-kecheng',
-              name: ''
-            },
-            {
-              text: '老师',
-              type: '3-2',
-              icon: 'icon-laoshi',
-              name: ''
-            },
-            {
-              text: '知识专栏',
-              type: '3-3',
-              icon: 'icon-zhishizhuanlan1',
-              name: ''
-            },
-            {
-              text: '知识内容',
-              type: '3-4',
-              icon: 'icon-zhishizhuanlan',
-              name: ''
-            },
-            {
-              text: '知识直播',
-              type: '3-5',
-              icon: 'icon-zhibobofangshexiangjitianxianxianxing',
-              name: ''
-            },
-            {
-              text: '知识付费会员',
-              type: '3-6',
-              icon: 'icon-zhishifufeihuiyuan',
-              name: ''
-            },
-            {
-              text: '群打卡',
-              type: '3-7',
-              icon: 'icon-daka',
-              name: ''
-            },
-            {
-              text: '报名表单',
-              type: '3-8',
-              icon: 'icon-baomingbiaodan',
-              name: ''
-            }
-          ]
-        } */
       ],
     }
   },
@@ -310,12 +219,13 @@ export default {
 <style scoped lang="less">
 /* 组件 */
 .sliderassembly {
-  width: 190px;
+  width: 275px;
   height: 100%;
   overflow-y: scroll;
   border-right: 1px solid #ebedf0;
   box-sizing: border-box;
   padding: 0 12px;
+  background: #fff;
   /* 滚动条 */
   &::-webkit-scrollbar {
     width: 1px;

src/layout/home/index.vue

@@ -28,8 +28,9 @@
           ><i class="el-icon-delete-solid el-icon--left"></i>重置</el-button
         >
         <el-button @click="Preservation"
-          ><i class="el-icon-s-claim el-icon--left"></i>上传并继续</el-button
+          ><i class="el-icon-s-claim el-icon--left"></i>保存</el-button
         >
+        <el-button @click="catJson">查看JSON </el-button>
         <el-button @click="upperShelf" type="primary"
           ><i class="el-icon-upload el-icon--left"></i>上架</el-button
         >
@@ -141,6 +142,13 @@
           <i class="iconfont icon-zujian" />
           组件管理
         </span>
+        <span
+          class="active"
+          v-show="rightcom!='componenmanagement'&&rightcom!='decorate'"
+        >
+          <i class="iconfont icon-zujian" />
+          组件设置
+        </span>
       </div>
 
       <!-- 右侧工具栏 -->
@@ -393,7 +401,38 @@ export default {
         })
       })
     },
-
+    // 查看JSON
+    catJson() {
+      this.$alert(
+        `{
+          <br/>
+          "id": ${this.id},
+          <br/>
+          "name": "${this.pageSetup.name}",
+          <br/>
+          "templateJson": ${JSON.stringify(this.pageSetup)},
+          <br/>
+          "component": ${JSON.stringify(this.pageComponents)},
+          <br/>
+        }`,
+        '查看JSON',
+        {
+          confirmButtonText: '确定',
+          customClass: 'JSONView',
+          dangerouslyUseHTMLString: true,
+          callback: () => {},
+        }
+      )
+      console.log(
+        {
+          id: this.id,
+          name: this.pageSetup.name,
+          templateJson: this.pageSetup,
+          component: this.pageComponents,
+        },
+        '----------------查看JSON'
+      )
+    },
     /**
      * 保存
      *
@@ -934,6 +973,7 @@ export default {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
+    background: #f7f8fa;
   }
 
   /* 手机 */
@@ -947,9 +987,9 @@ export default {
     &::-webkit-scrollbar {
       width: 1px;
     }
-    &::-webkit-scrollbar-thumb {
+    // &::-webkit-scrollbar-thumb {
-      background-color: #155bd4;
+    //   background-color: #155bd4;
-    }
+    // }
 
     /* 手机样式 */
     .phoneAll {
@@ -1074,6 +1114,8 @@ export default {
     overflow-y: scroll;
     overflow-x: hidden;
     position: relative;
+    padding: 0 12px;
+    background: #fff;
     &::-webkit-scrollbar {
       width: 1px;
     }
@@ -1086,7 +1128,7 @@ export default {
   .decorateTab {
     position: fixed;
     display: flex;
-    right: 390px;
+    right: 380px;
     top: 115px;
     flex-direction: column;
     span {
@@ -1129,4 +1171,5 @@ export default {
   transform: translate(8px, 8px);
   opacity: 0;
 }
+
 </style>

src/utils/componentProperties.js

@@ -6,30 +6,30 @@ const componentsData = new Map()
 componentsData.set('captiontext', {
   component: 'captiontext',
   text: '标题文字',
-  type: '1-1',
+  type: '1-3',
   active: true,
   style: 'captiontextsstyle',
   setStyle: {
     text: '标题文字',
-    name: '标题文字',
+    name: '标题文字',//标题内容
-    description: '',
+    description: '',//描述内容
-    wordSize: 16,
+    wordSize: 16,//标题大小
-    descriptionSize: 12,
+    descriptionSize: 12,//描述大小
-    wordWeight: 400,
+    wordWeight: 400,//标题粗细
-    positions: 'left',
+    positions: 'left', //显示位置  可选left/center
-    descriptionWeight: 200,
+    descriptionWeight: 200,//描述粗细
-    wordColor: 'rgba(50, 50, 51, 10)',
+    wordColor: 'rgba(50, 50, 51, 10)',//标题颜色
-    descriptionColor: 'rgba(150, 151, 153, 10)',
+    descriptionColor: 'rgba(150, 151, 153, 10)',//描述颜色
-    backColor: 'rgba(255, 255, 255, 10)',
+    backColor: 'rgba(255, 255, 255, 10)', //背景颜色
-    borderBott: false,
+    borderBott: false, //底部分割线
-    wordHeight: 24,
+    wordHeight: 24,//框体高度
-    more: {
+    more: {    //查看更多
-      show: false,
+      show: false,//是否显示查看更多
-      type: 1,
+      type: 1, // 样式选择
-      text: '查看更多',
+      text: '查看更多', //自定义文字
-      httpType: 1,
+      httpType: 1,//链接类型
-      http: '',
+      http: '',//外部链接
-      select: {},
+      select: {},//内部跳转链接
     },
   },
 })
@@ -37,7 +37,7 @@ componentsData.set('captiontext', {
 componentsData.set('listswitching', {
   component: 'listswitching',
   text: '商品',
-  type: '1-2',
+  type: '2-1',
   active: true,
   style: 'listswitchingstyle',
   setStyle: {
@@ -84,13 +84,13 @@ componentsData.set('pictureads', {
   style: 'pictureadsstyle',
   setStyle: {
     text: '图片广告',
-    swiperType: 0,
+    swiperType: 0,  // 选择模板
-    borderRadius: 0,
+    borderRadius: 0,// 图片倒角
-    pageMargin: 0,
+    pageMargin: 0,  // 页面边距
-    imageMargin: 0,
+    imageMargin: 0, // 图片边距
-    pagingType: 0,
+    pagingType: 0,  // 分页类型: 0/"bullets"/"fraction"/"progressbar"
-    rowindividual: 2,
+    rowindividual: 2,// 一行个数
-    imageList: [],
+    imageList: [],  // 添加图片
   },
 })
 
@@ -118,7 +118,7 @@ componentsData.set('graphicnavigation', {
 componentsData.set('richtext', {
   component: 'richtext',
   text: '富文本',
-  type: '1-5',
+  type: '1-10',
   active: true,
   style: 'richtextstyle',
   setStyle: {
@@ -170,7 +170,7 @@ componentsData.set('magiccube', {
 componentsData.set('auxiliarysegmentation', {
   component: 'auxiliarysegmentation',
   text: '辅助分割',
-  type: '1-7',
+  type: '1-11',
   active: true,
   style: 'auxiliarysegmentationstyle',
   setStyle: {
@@ -185,7 +185,7 @@ componentsData.set('auxiliarysegmentation', {
 componentsData.set('commoditysearch', {
   component: 'commoditysearch',
   text: '商品搜索',
-  type: '1-8',
+  type: '1-1',
   active: true,
   style: 'commoditysearchstyle',
   setStyle: {
@@ -204,7 +204,7 @@ componentsData.set('commoditysearch', {
 componentsData.set('storeinformation', {
   component: 'storeinformation',
   text: '店铺信息',
-  type: '1-9',
+  type: '1-12',
   active: true,
   style: 'storeinformationstyle',
   setStyle: {
@@ -219,7 +219,7 @@ componentsData.set('storeinformation', {
 componentsData.set('entertheshop', {
   component: 'entertheshop',
   text: '进入店铺',
-  type: '1-10',
+  type: '1-13',
   active: true,
   style: 'entertheshopstyle',
   setStyle: {
@@ -233,7 +233,7 @@ componentsData.set('entertheshop', {
 componentsData.set('notice', {
   component: 'notice',
   text: '公告',
-  type: '1-11',
+  type: '1-7',
   active: true,
   style: 'noticestyle',
   setStyle: {
@@ -246,7 +246,7 @@ componentsData.set('notice', {
 componentsData.set('videoss', {
   component: 'videoss',
   text: '视频',
-  type: '1-12',
+  type: '1-8',
   active: true,
   style: 'videostyle',
   setStyle: {
@@ -258,7 +258,7 @@ componentsData.set('videoss', {
 componentsData.set('voicer', {
   component: 'voicer',
   text: '音频',
-  type: '1-13',
+  type: '1-9',
   active: true,
   style: 'voicerstyle',
   setStyle: {
@@ -269,7 +269,7 @@ componentsData.set('voicer', {
 componentsData.set('custommodule', {
   component: 'custommodule',
   text: '自定义模块',
-  type: '1-14',
+  type: 'demo',
   active: true,
   style: 'custommodulestyle',
   setStyle: {
@@ -281,7 +281,7 @@ componentsData.set('custommodule', {
 componentsData.set('communitypowder', {
   component: 'communitypowder',
   text: '社群涨粉',
-  type: '1-15',
+  type: '1-14',
   active: true,
   style: 'communitypowderstyle',
   setStyle: {
@@ -296,12 +296,12 @@ componentsData.set('communitypowder', {
 })
 componentsData.set('storenotecard', {
   component: 'storenotecard',
-  text: '店铺笔记卡片',
+  text: '文章模块',
-  type: '1-16',
+  type: '2-2',
   active: true,
   style: 'storenotecardstyle',
   setStyle: {
-    text: '店铺笔记卡片',
+    text: '文章模块',
     name: '这里显示专题名称', //专题名称
     commodityType: 0, // 选择模板
     moditystyle: 0, // 卡片样式选择
@@ -353,24 +353,24 @@ componentsData.set('onlineservice', {
 })
 componentsData.set('investigate', {
   component: 'investigate',
-  text: '调研',
+  text: '表单模块',
-  type: '1-20',
+  type: '2-3',
   active: true,
   style: 'investigatestyle',
   setStyle: {
-    text: '调研',
+    text: '表单模块',
-    title: '调研',
+    title: '表单模块',
     jsonData: [], //value1为sass显示内容，value2为前端显示内容
   },
 })
 componentsData.set('tabBar', {
   component: 'tabBar',
-  text: '导航',
+  text: '底部导航',
-  type: '1-21',
+  type: '1-5',
   active: true,
   style: 'tabBarStyle',
   setStyle: {
-    text: '导航',
+    text: '底部导航',
     activeColor: '#1989fa',
     inactiveColor: '#7d7e80',
     isShowBorder: true,
@@ -384,7 +384,7 @@ componentsData.set('tabBar', {
 componentsData.set('follow', {
   component: 'follow',
   text: '关注公众号',
-  type: '1-22',
+  type: '1-15',
   active: true,
   style: 'followStyle',
   setStyle: {
@@ -397,7 +397,7 @@ componentsData.set('follow', {
 componentsData.set('suspension', {
   component: 'suspension',
   text: '悬浮按钮',
-  type: '1-23',
+  type: '1-16',
   active: true,
   style: 'suspensionstyle',
   setStyle: {

src/views/establishShop/index.vue

@@ -337,8 +337,10 @@
         </section>
       </el-tab-pane>
 
-      <!-- <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+      <el-tab-pane label="开屏广告" name="openScreen">
-      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane> -->
+        配置管理
+      </el-tab-pane>
+      <!-- <el-tab-pane label="xxx" name="third">xxx</el-tab-pane> -->
     </el-tabs>
 
     <!-- 推广弹框 -->
@@ -733,9 +735,9 @@ export default {
   box-sizing: border-box;
 
   /* tab */
-  /deep/.el-tabs__nav-wrap .is-top {
+  // /deep/.el-tabs__nav-wrap .is-top {
-    padding: 0 20px;
+  //   padding: 0 20px;
-  }
+  // }
 
   .el-dropdown-link {
     cursor: pointer;