src/scrm_pages/site/components/add-contact.vue

@@ -0,0 +1,286 @@
+<template>
+    <div>
+         <div class="feature ">
+            <ul >
+                <li @click="slideshow = true">
+                    <span>
+                        <img :src="new1" alt="">
+                        <p>轮播图</p>  
+                    </span>
+                </li>
+                <li @click="address = true">
+                    <span>
+                        <img :src="new1" alt="">
+                        <p>医院地址</p>  
+                    </span>
+                </li>
+                <li @click="contact = true">
+                    <span>
+                        <img :src="new1" alt="">
+                        <p>联系方式</p>  
+                    </span>
+                </li>
+                <li @click="time = true">
+                    <span>
+                        <img :src="new1" alt="">
+                        <p>工作时间</p>  
+                    </span>
+                </li>
+                <li @click="type = true">
+                    <span>
+                        <img :src="new1" alt="">
+                        <p>乘车方式</p>  
+                    </span>
+                </li>
+            </ul>
+         </div>
+<!-- 轮播图 -->
+<el-dialog
+    title="新增轮播图"
+    :visible.sync="slideshow"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="添加图片: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="slideshow = false">取 消</el-button>
+      <el-button type="primary" @click="slideshow = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 医院地址 -->
+  <el-dialog
+    title="新增轮播图"
+    :visible.sync="address"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="医院地址: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="医院地图: ">
+
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="address = false">取 消</el-button>
+      <el-button type="primary" @click="address = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+<!-- 新增联系方式 -->
+<el-dialog
+    title="新增联系方式"
+    :visible.sync="contact"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="联系方式: ">
+        <div class="used">
+             <ul>
+                 <li>
+                    <span class="name">医院电话</span>
+                    <span class="icon"> 
+                        <i class="el-icon-edit-outline" @click="addLink = true"></i>
+                        <i class="el-icon-delete" @click="deleteList = true"></i>
+                    </span>
+                 </li>
+                 <li>
+                    <span class="name">微信号</span>
+                    <span class="icon"> 
+                        <i class="el-icon-edit-outline" @click="addLink = true"></i>
+                        <i class="el-icon-delete" @click="deleteList = true"></i>
+                    </span>
+                 </li>
+             </ul>
+        </div>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="addLink = true">添加联系方式</el-button>      
+      <el-button @click="contact = false">取 消</el-button>
+      <el-button type="primary" @click="contact = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+
+  <!-- 确定删除组件 -->
+    <el-dialog
+        title="删除提示"
+        :visible.sync="deleteList"
+        width="550px"
+        :before-close="handleClose">
+        <span>确认要删除该组件吗？删除后，该组件将无法恢复</span>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="deleteList = false">取 消</el-button>
+            <el-button type="primary" @click="deleteList = false">确 定</el-button>
+        </span>
+    </el-dialog>
+  <!-- 新增联系方式 -->
+  <el-dialog
+    title="新增联系方式"
+    :visible.sync="addLink"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="标题:">
+            <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="联系方式:">
+            <el-radio-group v-model="form.resource">
+            <el-radio label="电话"></el-radio>
+            <el-radio label="非电话"></el-radio>
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item label="内容:">
+            <el-input v-model="form.name"></el-input>
+        </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+        <el-button @click="addLink = false">取 消</el-button>
+        <el-button type="primary" @click="addLink = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+ <!-- 工作时间 -->
+ <el-dialog
+    title="新增工作时间"
+    :visible.sync="time"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="工作时间: ">
+        <el-input
+          type="textarea"
+          :rows="6"
+          placeholder="请输入内容"
+          v-model="textarea">
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="time = false">取 消</el-button>
+      <el-button type="primary" @click="time = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 新增乘车方式 -->
+ <el-dialog
+    title="新增乘车方式"
+    :visible.sync="type"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="乘车方式: ">
+        <el-input
+          type="textarea"
+          :rows="6"
+          placeholder="请输入内容"
+          v-model="textarea">
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="type = false">取 消</el-button>
+      <el-button type="primary" @click="type = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+
+    </div>
+</template>
+
+
+<script>
+export default {
+  name: "addcontact",
+  data() {
+    return {
+      slideshow:false,
+      address:false,
+      contact:false,
+      addLink:false,
+      time:false,
+      type:false,
+      new1: require("../../../assets/preview/new-1.png"),
+      form: {
+        name: ""
+      }
+    };
+  }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+.tips {
+  font-size: 12px;
+  line-height: 18px;
+}
+.used {
+  ul {
+    li {
+      height: 44px;
+      line-height: 44px;
+      font-size: 14px;
+      display: flex;
+      color: #606266;      
+      align-items: center;
+      justify-content: space-between;
+      border: 1px solid #e4e7ed;
+      padding: 0 10px;
+      margin-bottom: 10px;
+      border-radius: 4px;
+      i {
+        font-size: 19px;
+        margin: 0 6px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

src/scrm_pages/site/components/contact-used.vue

@@ -0,0 +1,14 @@
+<template>
+    
+</template>
+
+
+<script>
+export default {
+    name:'contactused'
+}
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+
+</style>

src/scrm_pages/site/components/new-feature.vue

@@ -1,107 +1,329 @@
 <template>
-<div class="feature">
-    <ul >
-        <li>
+<div class="feature-box">
+  <div class="feature ">
+      <ul >
+          <li @click="dialogVisible = true">
+              <span>
+                <img :src="new1" alt="">
+                <p>轮播图</p>  
+              </span>
+          </li>
+          <li @click="two = true">
             <span>
-              <img :src="new1" alt="">
-              <p>轮播图</p>  
-            </span>
-        </li>
-         <li>
-           <span>
-              <img :src="new1" alt="">
-              <p>轮播图</p>  
-            </span>  
-        </li>
-         <li>
-           <span>
-              <img :src="new1" alt="">
-              <p>轮播图</p>  
-            </span>  
-        </li>
-         <li>
-           <span>
-              <img :src="new1" alt="">
-              <p>轮播图</p>  
-            </span>  
-        </li>
-         <li>
-           <span>
-              <img :src="new1" alt="">
-              <p class="title">轮播图</p>  
-            </span>  
-        </li>
-    </ul>
-    <!-- <el-row :gutter="21" type="flex"  justify="space-around">
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>轮播图</p></div></el-col>
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>医院介绍</p></div></el-col>
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>科室介绍</p></div></el-col>
-    </el-row>
-    <el-row :gutter="21" type="flex"  justify="space-around">
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>轮播图</p></div></el-col>
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>医院介绍</p></div></el-col>
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>科室介绍</p></div></el-col>
-    </el-row>
-    <el-row :gutter="21" type="flex"  justify="space-around">
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>轮播图</p></div></el-col>
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>医院介绍</p></div></el-col>
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>科室介绍</p></div></el-col>
-    </el-row> -->
-</div>    
-</template>
+                <img :src="new1" alt="">
+                <p>医院介绍</p>  
+              </span>  
+          </li>
+          <li @click="three = true">
+            <span>
+                <img :src="new1" alt="">
+                <p>科室介绍</p>  
+              </span>  
+          </li>
+          <li @click="four = true">
+            <span>
+                <img :src="new1" alt="">
+                <p>名医介绍</p>  
+              </span>  
+          </li>
+          <li @click="five = true">
+            <span>
+                <img :src="new1" alt="">
+                <p class="title">科室环境</p>  
+              </span>  
+          </li>
+          <li @click="six = true">
+            <span>
+                <img :src="new1" alt="">
+                <p class="title">文章列表</p>  
+              </span>  
+          </li>
+          <li @click="seven = true">
+            <span>
+                <img :src="new1" alt="">
+                <p class="title">活动列表</p>  
+              </span>  
+          </li>
+          <li @click="eight = true">
+            <span>
+                <img :src="new1" alt="">
+                <p class="title">魔方导航</p>  
+              </span>  
+          </li>
+      </ul>
+  </div>    
+  <div class="clear"></div>
+
+  <!-- 新增轮播图 -->
+  <el-dialog
+    title="新增轮播图"
+    :visible.sync="dialogVisible"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="添加图片: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+    </span>
+  </el-dialog>
+  <!-- 新增医院介绍 -->
+  <el-dialog
+    title="新增医院介绍"
+    :visible.sync="two"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="医院介绍: ">
+        <el-input
+          type="textarea"
+          :rows="6"
+          placeholder="请输入内容"
+          v-model="textarea">
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="two = false">取 消</el-button>
+      <el-button type="primary" @click="two = false">确 定</el-button>
+    </span>
+  </el-dialog>
+  <!-- 新增科室介绍 -->
+  <el-dialog
+    title="新增科室介绍"
+    :visible.sync="three"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="科室介绍: ">
+        <el-input
+          type="textarea"
+          :rows="6"
+          placeholder="请输入内容"
+          v-model="textarea">
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="three = false">取 消</el-button>
+      <el-button type="primary" @click="three = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 新增名医介绍 -->
+  <el-dialog
+    title="新增名医介绍"
+    :visible.sync="four"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="新增名医: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="four = false">取 消</el-button>
+      <el-button type="primary" @click="four = false">确 定</el-button>
+    </span>
+  </el-dialog>
+  <!-- 新增科室环境 -->
+   <el-dialog
+    title="新增科室环境"
+    :visible.sync="five"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="新增科室环境: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="five = false">取 消</el-button>
+      <el-button type="primary" @click="five = false">确 定</el-button>
+    </span>
+  </el-dialog>
+  <!-- 新增文章列表 -->
+  <el-dialog
+    title="新增文章列表"
+    :visible.sync="six"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="文章分类: ">
+        <el-select v-model="form.region" placeholder="请选择活动区域" style="width:49%;float:left;">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+        <el-select v-model="form.region" placeholder="请选择活动区域" style="width:49%;float:right;">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="首页展示条数: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="six = false">取 消</el-button>
+      <el-button type="primary" @click="six = false">确 定</el-button>
+    </span>
+  </el-dialog>
+  <!-- 新增活动列表 -->
+   <el-dialog
+    title="新增活动列表"
+    :visible.sync="seven"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+     
+      <el-form-item label="首页展示条数: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="seven = false">取 消</el-button>
+      <el-button type="primary" @click="seven = false">确 定</el-button>
+    </span>
+  </el-dialog>
+  <!-- 新增魔方导航 -->
+  <el-dialog
+    title="新增魔方导航"
+    :visible.sync="eight"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="新增科室环境: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="eight = false">取 消</el-button>
+      <el-button type="primary" @click="eight = false">确 定</el-button>
+    </span>
+  </el-dialog>
 
 
+</div>
+</template>
+
 <script>
 export default {
   name: "newfeature",
   data() {
     return {
-      new1: require("../../../assets/preview/new-1.png")
+      new1: require("../../../assets/preview/new-1.png"),
+      dialogVisible: false,
+      two: false,
+      three: false,
+      four: false,
+      five: false,
+      six: false,
+      seven: false,
+      eight: false,
+      form: {
+        name: ""
+      }
     };
   }
 };
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-.feature {
-  ul {
-    border: 1px solid #eaeefb;
-    float: left;
-    width: 100%;
-    li {
-      width: 33.3%;
-      float: left;
-      text-align: center;
-      height: 120px;
-      color: #666;
-      font-size: 13px;
-      border-right: 1px solid #eee;
-      border-bottom: 1px solid #eee;
-      margin-right: -1px;
-      margin-bottom: -1px;
-      span {
-        vertical-align: middle;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 120px;
-        img {
-          display: inline-block;
-          font-size: 32px;
-          margin-bottom: 15px;
-          color: #606266;
-          transition: color 0.15s linear;
-          vertical-align: middle;
-        }
-        .title {
-          display: inline-block;
-          padding: 0 3px;
-          height: 30px;
-          vertical-align: middle;
-        }
-      }
-    }
-  }
+
+.clearfix {
+  clear: both;
+}
+
+.el-upload--picture-card {
+  width: 80px !important;
+  height: 80px !important;
+  line-height: 80px !important;
+}
+.tips {
+  font-size: 12px;
+  line-height: 18px;
 }
 </style>

src/scrm_pages/site/components/used-list.vue

@@ -0,0 +1,361 @@
+<template>
+<div>
+    <div class="used">
+        <ul>
+            <li>
+                <span class="name">轮播图</span>
+                <span class="icon"> 
+                    <i class="el-icon-edit-outline" @click="dialogVisible = true"></i>
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
+                </span>
+            </li>
+            <li>
+                <span class="name">魔方导航</span>
+                <span class="icon"> 
+                    <i class="el-icon-edit-outline" @click="eight = true"></i>
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
+                </span>
+            </li>
+            <li>
+                <span class="name">医院介绍</span>
+                <span class="icon"> 
+                    <i class="el-icon-edit-outline" @click="two = true"></i>
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
+                </span>
+            </li>
+            <li>
+                <span class="name">科室介绍</span>
+                <span class="icon"> 
+                    <i class="el-icon-edit-outline" @click="three = true"></i>
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
+                </span>
+            </li>
+            <li>
+                <span class="name">名医介绍</span>
+                <span class="icon"> 
+                    <i class="el-icon-edit-outline" @click="four = true"></i>
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
+                </span>
+            </li>
+            <li>
+                <span class="name">科室环境</span>
+                <span class="icon"> 
+                    <i class="el-icon-edit-outline" @click="five = true"></i>
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
+                </span>
+            </li>
+            <li>
+                <span class="name">文章列表</span>
+                <span class="icon"> 
+                    <i class="el-icon-edit-outline" @click="six = true"></i>
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
+                </span>
+            </li>
+            <li>
+                <span class="name">活动列表</span> 
+                <span class="icon"> 
+                    <i class="el-icon-edit-outline" @click="seven = true"></i>
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
+                </span>
+            </li>
+        </ul>
+    </div>
+
+<!-- 确定删除组件 -->
+    <el-dialog
+        title="删除提示"
+        :visible.sync="deleteList"
+        width="550px"
+        :before-close="handleClose">
+        <span>确认要删除该组件吗？删除后，该组件将无法恢复</span>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="deleteList = false">取 消</el-button>
+            <el-button type="primary" @click="deleteList = false">确 定</el-button>
+        </span>
+    </el-dialog>
+
+
+  <!-- 新增轮播图 -->
+  <el-dialog
+    title="新增轮播图"
+    :visible.sync="dialogVisible"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="添加图片: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">取 消</el-button>
+      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
+    </span>
+  </el-dialog>
+  <!-- 新增医院介绍 -->
+  <el-dialog
+    title="新增医院介绍"
+    :visible.sync="two"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="医院介绍: ">
+          <el-input
+          type="textarea"
+          :rows="6"
+          placeholder="请输入内容"
+          v-model="textarea">
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="two = false">取 消</el-button>
+      <el-button type="primary" @click="two = false">确 定</el-button>
+    </span>
+  </el-dialog>
+  <!-- 新增科室介绍 -->
+  <el-dialog
+    title="新增科室介绍"
+    :visible.sync="three"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="科室介绍: ">
+           <el-input
+          type="textarea"
+          :rows="6"
+          placeholder="请输入内容"
+          v-model="textarea">
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="three = false">取 消</el-button>
+      <el-button type="primary" @click="three = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 新增名医介绍 -->
+  <el-dialog
+    title="新增名医介绍"
+    :visible.sync="four"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="80px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="新增名医: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="four = false">取 消</el-button>
+      <el-button type="primary" @click="four = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 新增科室环境 -->
+   <el-dialog
+    title="新增科室环境"
+    :visible.sync="five"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="新增科室环境: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="five = false">取 消</el-button>
+      <el-button type="primary" @click="five = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 新增文章列表 -->
+  <el-dialog
+    title="新增文章列表"
+    :visible.sync="six"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="文章分类: ">
+        <el-select v-model="form.region" placeholder="请选择活动区域" style="width:49%;float:left;">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+        <el-select v-model="form.region" placeholder="请选择活动区域" style="width:49%;float:right;">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="首页展示条数: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="six = false">取 消</el-button>
+      <el-button type="primary" @click="six = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 新增活动列表 -->
+   <el-dialog
+    title="新增活动列表"
+    :visible.sync="seven"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+     
+      <el-form-item label="首页展示条数: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="seven = false">取 消</el-button>
+      <el-button type="primary" @click="seven = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+  <!-- 新增魔方导航 -->
+  <el-dialog
+    title="新增魔方导航"
+    :visible.sync="eight"
+    width="550px"
+    :before-close="handleClose">
+    <el-form ref="form" :model="form" label-width="100px">
+      <el-form-item label="模块标题: ">
+        <el-input v-model="form.name"></el-input>
+      </el-form-item>
+      <el-form-item label="排序值: ">
+        <el-input v-model="form.name"></el-input>
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
+      </el-form-item>
+      <el-form-item label="新增科室环境: ">
+        <el-upload
+          action="https://jsonplaceholder.typicode.com/posts/"
+          list-type="picture-card"
+          :on-preview="handlePictureCardPreview"
+          :on-remove="handleRemove">
+          <i class="el-icon-plus"></i>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="eight = false">取 消</el-button>
+      <el-button type="primary" @click="eight = false">确 定</el-button>
+    </span>
+  </el-dialog>
+
+
+</div>
+
+</template>
+
+
+<script>
+export default {
+  name: "usedlist",
+  data() {
+    return {
+      deleteList: false,
+      two: false,
+      three: false,
+      four: false,
+      five: false,
+      six: false,
+      seven: false,
+      eight: false,
+      dialogVisible: false,      
+      form: {
+        name: ""
+      }
+    };
+  }
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.used {
+  ul {
+    li {
+      height: 44px;
+      line-height: 44px;
+      font-size: 14px;
+      display: flex;
+      color: #606266;      
+      align-items: center;
+      justify-content: space-between;
+      border-bottom: 1px solid #e4e7ed;
+      i {
+        font-size: 19px;
+        margin: 0 6px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

src/scrm_pages/site/preview.vue

@@ -12,14 +12,14 @@
                                  <new-feature> </new-feature>
                             </el-tab-pane>
                             <el-tab-pane label="已使用" name="second">
-
+                                 <used-list></used-list>
                             </el-tab-pane>
                         </el-tabs>
                     </el-tab-pane>
                     <el-tab-pane label="联系我们">
                         <el-tabs v-model="activeName" @tab-click="handleClick">
                             <el-tab-pane label="新增模块" name="three">
-
+                                <add-contact></add-contact>
                             </el-tab-pane>
                             <el-tab-pane label="已使用" name="four">
                                 
@@ -36,11 +36,15 @@
 <script> 
 import BreadCrumb from "../components/bread-crumb";
 import NewFeature from "./components/new-feature";
+import UsedList from "./components/used-list";
+import AddContact from "./components/add-contact";
 export default {
   name: "preview",
   components: {
     BreadCrumb,
-    NewFeature
+    NewFeature,
+    UsedList,
+    AddContact
   },
   data() {
     return {

src/styles/index.scss

@@ -499,3 +499,47 @@ code {
   color: #C0C4CC;
   padding: 0 3px;
 }
+
+// 微网站-新增模块
+.feature {
+  ul {
+    border: 1px solid #eaeefb;
+    float: left;
+    width: 100%;
+    li {
+      width: 33.3%;
+      float: left;
+      text-align: center;
+      height: 120px;
+      color: #666;
+      font-size: 13px;
+      border-right: 1px solid #eee;
+      border-bottom: 1px solid #eee;
+      margin-right: -1px;
+      margin-bottom: -1px;
+      span {
+        vertical-align: middle;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 120px;
+        cursor: pointer;
+        img {
+          display: inline-block;
+          font-size: 32px;
+          margin-bottom: 15px;
+          color: #606266;
+          transition: color 0.15s linear;
+          vertical-align: middle;
+        }
+        .title {
+          display: inline-block;
+          padding: 0 3px;
+          height: 30px;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+}