ホーム エクスプローラ ヘルプ
登録 サインイン
zhangbj
/
scrm-vue
Watch 1
Star 0
Fork 0
コード 課題 0 プルリクエスト 0 リリース 0 Wiki Activity
ソースを参照

微网站页面

柳香萍 5 年 前
親
34ad03b5aa
コミット
fa9b698f50
共有6 個のファイルを変更した、1024 個の追加 と 93 個の削除を含む
分割表示 差分情報を表示
  1. 286 0
      src/scrm_pages/site/components/add-contact.vue
  2. 14 0
      src/scrm_pages/site/components/contact-used.vue
  3. 312 90
      src/scrm_pages/site/components/new-feature.vue
  4. 361 0
      src/scrm_pages/site/components/used-list.vue
  5. 7 3
      src/scrm_pages/site/preview.vue
  6. 44 0
      src/styles/index.scss

+ 286 - 0
src/scrm_pages/site/components/add-contact.vue ファイルの表示 

@@ -0,0 +1,286 @@
1 
+<template>
2 
+    <div>
3 
+         <div class="feature ">
4 
+            <ul >
5 
+                <li @click="slideshow = true">
6 
+                    <span>
7 
+                        <img :src="new1" alt="">
8 
+                        <p>轮播图</p>
9 
+                    </span>
10 
+                </li>
11 
+                <li @click="address = true">
12 
+                    <span>
13 
+                        <img :src="new1" alt="">
14 
+                        <p>医院地址</p>
15 
+                    </span>
16 
+                </li>
17 
+                <li @click="contact = true">
18 
+                    <span>
19 
+                        <img :src="new1" alt="">
20 
+                        <p>联系方式</p>
21 
+                    </span>
22 
+                </li>
23 
+                <li @click="time = true">
24 
+                    <span>
25 
+                        <img :src="new1" alt="">
26 
+                        <p>工作时间</p>
27 
+                    </span>
28 
+                </li>
29 
+                <li @click="type = true">
30 
+                    <span>
31 
+                        <img :src="new1" alt="">
32 
+                        <p>乘车方式</p>
33 
+                    </span>
34 
+                </li>
35 
+            </ul>
36 
+         </div>
37 
+<!-- 轮播图 -->
38 
+<el-dialog
39 
+    title="新增轮播图"
40 
+    :visible.sync="slideshow"
41 
+    width="550px"
42 
+    :before-close="handleClose">
43 
+    <el-form ref="form" :model="form" label-width="80px">
44 
+      <el-form-item label="模块标题: ">
45 
+        <el-input v-model="form.name"></el-input>
46 
+      </el-form-item>
47 
+      <el-form-item label="排序值: ">
48 
+        <el-input v-model="form.name"></el-input>
49 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
50 
+      </el-form-item>
51 
+      <el-form-item label="添加图片: ">
52 
+        <el-upload
53 
+          action="https://jsonplaceholder.typicode.com/posts/"
54 
+          list-type="picture-card"
55 
+          :on-preview="handlePictureCardPreview"
56 
+          :on-remove="handleRemove">
57 
+          <i class="el-icon-plus"></i>
58 
+        </el-upload>
59 
+      </el-form-item>
60 
+    </el-form>
61 
+    <span slot="footer" class="dialog-footer">
62 
+      <el-button @click="slideshow = false">取 消</el-button>
63 
+      <el-button type="primary" @click="slideshow = false">确 定</el-button>
64 
+    </span>
65 
+  </el-dialog>
66 
+
67 
+  <!-- 医院地址 -->
68 
+  <el-dialog
69 
+    title="新增轮播图"
70 
+    :visible.sync="address"
71 
+    width="550px"
72 
+    :before-close="handleClose">
73 
+    <el-form ref="form" :model="form" label-width="80px">
74 
+      <el-form-item label="模块标题: ">
75 
+        <el-input v-model="form.name"></el-input>
76 
+      </el-form-item>
77 
+      <el-form-item label="排序值: ">
78 
+        <el-input v-model="form.name"></el-input>
79 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
80 
+      </el-form-item>
81 
+      <el-form-item label="医院地址: ">
82 
+        <el-input v-model="form.name"></el-input>
83 
+      </el-form-item>
84 
+      <el-form-item label="医院地图: ">
85 
+
86 
+      </el-form-item>
87 
+    </el-form>
88 
+    <span slot="footer" class="dialog-footer">
89 
+      <el-button @click="address = false">取 消</el-button>
90 
+      <el-button type="primary" @click="address = false">确 定</el-button>
91 
+    </span>
92 
+  </el-dialog>
93 
+
94 
+<!-- 新增联系方式 -->
95 
+<el-dialog
96 
+    title="新增联系方式"
97 
+    :visible.sync="contact"
98 
+    width="550px"
99 
+    :before-close="handleClose">
100 
+    <el-form ref="form" :model="form" label-width="80px">
101 
+      <el-form-item label="模块标题: ">
102 
+        <el-input v-model="form.name"></el-input>
103 
+      </el-form-item>
104 
+      <el-form-item label="排序值: ">
105 
+        <el-input v-model="form.name"></el-input>
106 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
107 
+      </el-form-item>
108 
+      <el-form-item label="联系方式: ">
109 
+        <div class="used">
110 
+             <ul>
111 
+                 <li>
112 
+                    <span class="name">医院电话</span>
113 
+                    <span class="icon">
114 
+                        <i class="el-icon-edit-outline" @click="addLink = true"></i>
115 
+                        <i class="el-icon-delete" @click="deleteList = true"></i>
116 
+                    </span>
117 
+                 </li>
118 
+                 <li>
119 
+                    <span class="name">微信号</span>
120 
+                    <span class="icon">
121 
+                        <i class="el-icon-edit-outline" @click="addLink = true"></i>
122 
+                        <i class="el-icon-delete" @click="deleteList = true"></i>
123 
+                    </span>
124 
+                 </li>
125 
+             </ul>
126 
+        </div>
127 
+      </el-form-item>
128 
+    </el-form>
129 
+    <span slot="footer" class="dialog-footer">
130 
+      <el-button @click="addLink = true">添加联系方式</el-button>
131 
+      <el-button @click="contact = false">取 消</el-button>
132 
+      <el-button type="primary" @click="contact = false">确 定</el-button>
133 
+    </span>
134 
+  </el-dialog>
135 
+
136 
+
137 
+  <!-- 确定删除组件 -->
138 
+    <el-dialog
139 
+        title="删除提示"
140 
+        :visible.sync="deleteList"
141 
+        width="550px"
142 
+        :before-close="handleClose">
143 
+        <span>确认要删除该组件吗？删除后，该组件将无法恢复</span>
144 
+        <span slot="footer" class="dialog-footer">
145 
+            <el-button @click="deleteList = false">取 消</el-button>
146 
+            <el-button type="primary" @click="deleteList = false">确 定</el-button>
147 
+        </span>
148 
+    </el-dialog>
149 
+  <!-- 新增联系方式 -->
150 
+  <el-dialog
151 
+    title="新增联系方式"
152 
+    :visible.sync="addLink"
153 
+    width="550px"
154 
+    :before-close="handleClose">
155 
+    <el-form ref="form" :model="form" label-width="80px">
156 
+        <el-form-item label="标题:">
157 
+            <el-input v-model="form.name"></el-input>
158 
+        </el-form-item>
159 
+        <el-form-item label="联系方式:">
160 
+            <el-radio-group v-model="form.resource">
161 
+            <el-radio label="电话"></el-radio>
162 
+            <el-radio label="非电话"></el-radio>
163 
+            </el-radio-group>
164 
+        </el-form-item>
165 
+        <el-form-item label="内容:">
166 
+            <el-input v-model="form.name"></el-input>
167 
+        </el-form-item>
168 
+    </el-form>
169 
+    <span slot="footer" class="dialog-footer">
170 
+        <el-button @click="addLink = false">取 消</el-button>
171 
+        <el-button type="primary" @click="addLink = false">确 定</el-button>
172 
+    </span>
173 
+  </el-dialog>
174 
+
175 
+ <!-- 工作时间 -->
176 
+ <el-dialog
177 
+    title="新增工作时间"
178 
+    :visible.sync="time"
179 
+    width="550px"
180 
+    :before-close="handleClose">
181 
+    <el-form ref="form" :model="form" label-width="80px">
182 
+      <el-form-item label="模块标题: ">
183 
+        <el-input v-model="form.name"></el-input>
184 
+      </el-form-item>
185 
+      <el-form-item label="排序值: ">
186 
+        <el-input v-model="form.name"></el-input>
187 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
188 
+      </el-form-item>
189 
+      <el-form-item label="工作时间: ">
190 
+        <el-input
191 
+          type="textarea"
192 
+          :rows="6"
193 
+          placeholder="请输入内容"
194 
+          v-model="textarea">
195 
+        </el-input>
196 
+      </el-form-item>
197 
+    </el-form>
198 
+    <span slot="footer" class="dialog-footer">
199 
+      <el-button @click="time = false">取 消</el-button>
200 
+      <el-button type="primary" @click="time = false">确 定</el-button>
201 
+    </span>
202 
+  </el-dialog>
203 
+
204 
+  <!-- 新增乘车方式 -->
205 
+ <el-dialog
206 
+    title="新增乘车方式"
207 
+    :visible.sync="type"
208 
+    width="550px"
209 
+    :before-close="handleClose">
210 
+    <el-form ref="form" :model="form" label-width="80px">
211 
+      <el-form-item label="模块标题: ">
212 
+        <el-input v-model="form.name"></el-input>
213 
+      </el-form-item>
214 
+      <el-form-item label="排序值: ">
215 
+        <el-input v-model="form.name"></el-input>
216 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
217 
+      </el-form-item>
218 
+      <el-form-item label="乘车方式: ">
219 
+        <el-input
220 
+          type="textarea"
221 
+          :rows="6"
222 
+          placeholder="请输入内容"
223 
+          v-model="textarea">
224 
+        </el-input>
225 
+      </el-form-item>
226 
+    </el-form>
227 
+    <span slot="footer" class="dialog-footer">
228 
+      <el-button @click="type = false">取 消</el-button>
229 
+      <el-button type="primary" @click="type = false">确 定</el-button>
230 
+    </span>
231 
+  </el-dialog>
232 
+
233 
+
234 
+    </div>
235 
+</template>
236 
+
237 
+
238 
+<script>
239 
+export default {
240 
+  name: "addcontact",
241 
+  data() {
242 
+    return {
243 
+      slideshow:false,
244 
+      address:false,
245 
+      contact:false,
246 
+      addLink:false,
247 
+      time:false,
248 
+      type:false,
249 
+      new1: require("../../../assets/preview/new-1.png"),
250 
+      form: {
251 
+        name: ""
252 
+      }
253 
+    };
254 
+  }
255 
+};
256 
+</script>
257 
+
258 
+<style rel="stylesheet/scss" lang="scss" scoped>
259 
+
260 
+.tips {
261 
+  font-size: 12px;
262 
+  line-height: 18px;
263 
+}
264 
+.used {
265 
+  ul {
266 
+    li {
267 
+      height: 44px;
268 
+      line-height: 44px;
269 
+      font-size: 14px;
270 
+      display: flex;
271 
+      color: #606266;
272 
+      align-items: center;
273 
+      justify-content: space-between;
274 
+      border: 1px solid #e4e7ed;
275 
+      padding: 0 10px;
276 
+      margin-bottom: 10px;
277 
+      border-radius: 4px;
278 
+      i {
279 
+        font-size: 19px;
280 
+        margin: 0 6px;
281 
+        cursor: pointer;
282 
+      }
283 
+    }
284 
+  }
285 
+}
286 
+</style>

+ 14 - 0
src/scrm_pages/site/components/contact-used.vue ファイルの表示 

@@ -0,0 +1,14 @@
1 
+<template>
2 
+
3 
+</template>
4 
+
5 
+
6 
+<script>
7 
+export default {
8 
+    name:'contactused'
9 
+}
10 
+</script>
11 
+
12 
+<style rel="stylesheet/scss" lang="scss" scoped>
13 
+
14 
+</style>

+ 312 - 90
src/scrm_pages/site/components/new-feature.vue ファイルの表示 

@@ -1,107 +1,329 @@
1 1 
 <template>
2 
-<div class="feature">
3 
-    <ul >
4 
-        <li>
2 
+<div class="feature-box">
3 
+  <div class="feature ">
4 
+      <ul >
5 
+          <li @click="dialogVisible = true">
6 
+              <span>
7 
+                <img :src="new1" alt="">
8 
+                <p>轮播图</p>
9 
+              </span>
10 
+          </li>
11 
+          <li @click="two = true">
5 12 
             <span>
6 
-              <img :src="new1" alt="">
7 
-              <p>轮播图</p>
8 
-            </span>
9 
-        </li>
10 
-         <li>
11 
-           <span>
12 
-              <img :src="new1" alt="">
13 
-              <p>轮播图</p>
14 
-            </span>
15 
-        </li>
16 
-         <li>
17 
-           <span>
18 
-              <img :src="new1" alt="">
19 
-              <p>轮播图</p>
20 
-            </span>
21 
-        </li>
22 
-         <li>
23 
-           <span>
24 
-              <img :src="new1" alt="">
25 
-              <p>轮播图</p>
26 
-            </span>
27 
-        </li>
28 
-         <li>
29 
-           <span>
30 
-              <img :src="new1" alt="">
31 
-              <p class="title">轮播图</p>
32 
-            </span>
33 
-        </li>
34 
-    </ul>
35 
-    <!-- <el-row :gutter="21" type="flex"  justify="space-around">
36 
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>轮播图</p></div></el-col>
37 
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>医院介绍</p></div></el-col>
38 
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>科室介绍</p></div></el-col>
39 
-    </el-row>
40 
-    <el-row :gutter="21" type="flex"  justify="space-around">
41 
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>轮播图</p></div></el-col>
42 
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>医院介绍</p></div></el-col>
43 
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>科室介绍</p></div></el-col>
44 
-    </el-row>
45 
-    <el-row :gutter="21" type="flex"  justify="space-around">
46 
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>轮播图</p></div></el-col>
47 
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>医院介绍</p></div></el-col>
48 
-        <el-col :span="5"><div class="grid-content "><img :src="new1" alt=""><p>科室介绍</p></div></el-col>
49 
-    </el-row> -->
50 
-</div>
51 
-</template>
13 
+                <img :src="new1" alt="">
14 
+                <p>医院介绍</p>
15 
+              </span>
16 
+          </li>
17 
+          <li @click="three = true">
18 
+            <span>
19 
+                <img :src="new1" alt="">
20 
+                <p>科室介绍</p>
21 
+              </span>
22 
+          </li>
23 
+          <li @click="four = true">
24 
+            <span>
25 
+                <img :src="new1" alt="">
26 
+                <p>名医介绍</p>
27 
+              </span>
28 
+          </li>
29 
+          <li @click="five = true">
30 
+            <span>
31 
+                <img :src="new1" alt="">
32 
+                <p class="title">科室环境</p>
33 
+              </span>
34 
+          </li>
35 
+          <li @click="six = true">
36 
+            <span>
37 
+                <img :src="new1" alt="">
38 
+                <p class="title">文章列表</p>
39 
+              </span>
40 
+          </li>
41 
+          <li @click="seven = true">
42 
+            <span>
43 
+                <img :src="new1" alt="">
44 
+                <p class="title">活动列表</p>
45 
+              </span>
46 
+          </li>
47 
+          <li @click="eight = true">
48 
+            <span>
49 
+                <img :src="new1" alt="">
50 
+                <p class="title">魔方导航</p>
51 
+              </span>
52 
+          </li>
53 
+      </ul>
54 
+  </div>
55 
+  <div class="clear"></div>
56 
+
57 
+  <!-- 新增轮播图 -->
58 
+  <el-dialog
59 
+    title="新增轮播图"
60 
+    :visible.sync="dialogVisible"
61 
+    width="550px"
62 
+    :before-close="handleClose">
63 
+    <el-form ref="form" :model="form" label-width="80px">
64 
+      <el-form-item label="模块标题: ">
65 
+        <el-input v-model="form.name"></el-input>
66 
+      </el-form-item>
67 
+      <el-form-item label="排序值: ">
68 
+        <el-input v-model="form.name"></el-input>
69 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
70 
+      </el-form-item>
71 
+      <el-form-item label="添加图片: ">
72 
+        <el-upload
73 
+          action="https://jsonplaceholder.typicode.com/posts/"
74 
+          list-type="picture-card"
75 
+          :on-preview="handlePictureCardPreview"
76 
+          :on-remove="handleRemove">
77 
+          <i class="el-icon-plus"></i>
78 
+        </el-upload>
79 
+      </el-form-item>
80 
+    </el-form>
81 
+    <span slot="footer" class="dialog-footer">
82 
+      <el-button @click="dialogVisible = false">取 消</el-button>
83 
+      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
84 
+    </span>
85 
+  </el-dialog>
86 
+  <!-- 新增医院介绍 -->
87 
+  <el-dialog
88 
+    title="新增医院介绍"
89 
+    :visible.sync="two"
90 
+    width="550px"
91 
+    :before-close="handleClose">
92 
+    <el-form ref="form" :model="form" label-width="80px">
93 
+      <el-form-item label="模块标题: ">
94 
+        <el-input v-model="form.name"></el-input>
95 
+      </el-form-item>
96 
+      <el-form-item label="排序值: ">
97 
+        <el-input v-model="form.name"></el-input>
98 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
99 
+      </el-form-item>
100 
+      <el-form-item label="医院介绍: ">
101 
+        <el-input
102 
+          type="textarea"
103 
+          :rows="6"
104 
+          placeholder="请输入内容"
105 
+          v-model="textarea">
106 
+        </el-input>
107 
+      </el-form-item>
108 
+    </el-form>
109 
+    <span slot="footer" class="dialog-footer">
110 
+      <el-button @click="two = false">取 消</el-button>
111 
+      <el-button type="primary" @click="two = false">确 定</el-button>
112 
+    </span>
113 
+  </el-dialog>
114 
+  <!-- 新增科室介绍 -->
115 
+  <el-dialog
116 
+    title="新增科室介绍"
117 
+    :visible.sync="three"
118 
+    width="550px"
119 
+    :before-close="handleClose">
120 
+    <el-form ref="form" :model="form" label-width="80px">
121 
+      <el-form-item label="模块标题: ">
122 
+        <el-input v-model="form.name"></el-input>
123 
+      </el-form-item>
124 
+      <el-form-item label="排序值: ">
125 
+        <el-input v-model="form.name"></el-input>
126 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
127 
+      </el-form-item>
128 
+      <el-form-item label="科室介绍: ">
129 
+        <el-input
130 
+          type="textarea"
131 
+          :rows="6"
132 
+          placeholder="请输入内容"
133 
+          v-model="textarea">
134 
+        </el-input>
135 
+      </el-form-item>
136 
+    </el-form>
137 
+    <span slot="footer" class="dialog-footer">
138 
+      <el-button @click="three = false">取 消</el-button>
139 
+      <el-button type="primary" @click="three = false">确 定</el-button>
140 
+    </span>
141 
+  </el-dialog>
142 
+
143 
+  <!-- 新增名医介绍 -->
144 
+  <el-dialog
145 
+    title="新增名医介绍"
146 
+    :visible.sync="four"
147 
+    width="550px"
148 
+    :before-close="handleClose">
149 
+    <el-form ref="form" :model="form" label-width="80px">
150 
+      <el-form-item label="模块标题: ">
151 
+        <el-input v-model="form.name"></el-input>
152 
+      </el-form-item>
153 
+      <el-form-item label="排序值: ">
154 
+        <el-input v-model="form.name"></el-input>
155 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
156 
+      </el-form-item>
157 
+      <el-form-item label="新增名医: ">
158 
+        <el-upload
159 
+          action="https://jsonplaceholder.typicode.com/posts/"
160 
+          list-type="picture-card"
161 
+          :on-preview="handlePictureCardPreview"
162 
+          :on-remove="handleRemove">
163 
+          <i class="el-icon-plus"></i>
164 
+        </el-upload>
165 
+      </el-form-item>
166 
+    </el-form>
167 
+    <span slot="footer" class="dialog-footer">
168 
+      <el-button @click="four = false">取 消</el-button>
169 
+      <el-button type="primary" @click="four = false">确 定</el-button>
170 
+    </span>
171 
+  </el-dialog>
172 
+  <!-- 新增科室环境 -->
173 
+   <el-dialog
174 
+    title="新增科室环境"
175 
+    :visible.sync="five"
176 
+    width="550px"
177 
+    :before-close="handleClose">
178 
+    <el-form ref="form" :model="form" label-width="100px">
179 
+      <el-form-item label="模块标题: ">
180 
+        <el-input v-model="form.name"></el-input>
181 
+      </el-form-item>
182 
+      <el-form-item label="排序值: ">
183 
+        <el-input v-model="form.name"></el-input>
184 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
185 
+      </el-form-item>
186 
+      <el-form-item label="新增科室环境: ">
187 
+        <el-upload
188 
+          action="https://jsonplaceholder.typicode.com/posts/"
189 
+          list-type="picture-card"
190 
+          :on-preview="handlePictureCardPreview"
191 
+          :on-remove="handleRemove">
192 
+          <i class="el-icon-plus"></i>
193 
+        </el-upload>
194 
+      </el-form-item>
195 
+    </el-form>
196 
+    <span slot="footer" class="dialog-footer">
197 
+      <el-button @click="five = false">取 消</el-button>
198 
+      <el-button type="primary" @click="five = false">确 定</el-button>
199 
+    </span>
200 
+  </el-dialog>
201 
+  <!-- 新增文章列表 -->
202 
+  <el-dialog
203 
+    title="新增文章列表"
204 
+    :visible.sync="six"
205 
+    width="550px"
206 
+    :before-close="handleClose">
207 
+    <el-form ref="form" :model="form" label-width="100px">
208 
+      <el-form-item label="模块标题: ">
209 
+        <el-input v-model="form.name"></el-input>
210 
+      </el-form-item>
211 
+      <el-form-item label="排序值: ">
212 
+        <el-input v-model="form.name"></el-input>
213 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
214 
+      </el-form-item>
215 
+      <el-form-item label="文章分类: ">
216 
+        <el-select v-model="form.region" placeholder="请选择活动区域" style="width:49%;float:left;">
217 
+          <el-option label="区域一" value="shanghai"></el-option>
218 
+          <el-option label="区域二" value="beijing"></el-option>
219 
+        </el-select>
220 
+        <el-select v-model="form.region" placeholder="请选择活动区域" style="width:49%;float:right;">
221 
+          <el-option label="区域一" value="shanghai"></el-option>
222 
+          <el-option label="区域二" value="beijing"></el-option>
223 
+        </el-select>
224 
+      </el-form-item>
225 
+      <el-form-item label="首页展示条数: ">
226 
+        <el-input v-model="form.name"></el-input>
227 
+      </el-form-item>
228 
+    </el-form>
229 
+    <span slot="footer" class="dialog-footer">
230 
+      <el-button @click="six = false">取 消</el-button>
231 
+      <el-button type="primary" @click="six = false">确 定</el-button>
232 
+    </span>
233 
+  </el-dialog>
234 
+  <!-- 新增活动列表 -->
235 
+   <el-dialog
236 
+    title="新增活动列表"
237 
+    :visible.sync="seven"
238 
+    width="550px"
239 
+    :before-close="handleClose">
240 
+    <el-form ref="form" :model="form" label-width="100px">
241 
+      <el-form-item label="模块标题: ">
242 
+        <el-input v-model="form.name"></el-input>
243 
+      </el-form-item>
244 
+      <el-form-item label="排序值: ">
245 
+        <el-input v-model="form.name"></el-input>
246 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
247 
+      </el-form-item>
248 
+
249 
+      <el-form-item label="首页展示条数: ">
250 
+        <el-input v-model="form.name"></el-input>
251 
+      </el-form-item>
252 
+    </el-form>
253 
+    <span slot="footer" class="dialog-footer">
254 
+      <el-button @click="seven = false">取 消</el-button>
255 
+      <el-button type="primary" @click="seven = false">确 定</el-button>
256 
+    </span>
257 
+  </el-dialog>
258 
+  <!-- 新增魔方导航 -->
259 
+  <el-dialog
260 
+    title="新增魔方导航"
261 
+    :visible.sync="eight"
262 
+    width="550px"
263 
+    :before-close="handleClose">
264 
+    <el-form ref="form" :model="form" label-width="100px">
265 
+      <el-form-item label="模块标题: ">
266 
+        <el-input v-model="form.name"></el-input>
267 
+      </el-form-item>
268 
+      <el-form-item label="排序值: ">
269 
+        <el-input v-model="form.name"></el-input>
270 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
271 
+      </el-form-item>
272 
+      <el-form-item label="新增科室环境: ">
273 
+        <el-upload
274 
+          action="https://jsonplaceholder.typicode.com/posts/"
275 
+          list-type="picture-card"
276 
+          :on-preview="handlePictureCardPreview"
277 
+          :on-remove="handleRemove">
278 
+          <i class="el-icon-plus"></i>
279 
+        </el-upload>
280 
+      </el-form-item>
281 
+    </el-form>
282 
+    <span slot="footer" class="dialog-footer">
283 
+      <el-button @click="eight = false">取 消</el-button>
284 
+      <el-button type="primary" @click="eight = false">确 定</el-button>
285 
+    </span>
286 
+  </el-dialog>
52 287
53 288
289 
+</div>
290 
+</template>
291 
+
54 292 
 <script>
55 293 
 export default {
56 294 
   name: "newfeature",
57 295 
   data() {
58 296 
     return {
59 
-      new1: require("../../../assets/preview/new-1.png")
297 
+      new1: require("../../../assets/preview/new-1.png"),
298 
+      dialogVisible: false,
299 
+      two: false,
300 
+      three: false,
301 
+      four: false,
302 
+      five: false,
303 
+      six: false,
304 
+      seven: false,
305 
+      eight: false,
306 
+      form: {
307 
+        name: ""
308 
+      }
60 309 
     };
61 310 
   }
62 311 
 };
63 312 
 </script>
64 313
65 314 
 <style rel="stylesheet/scss" lang="scss" scoped>
66 
-.feature {
67 
-  ul {
68 
-    border: 1px solid #eaeefb;
69 
-    float: left;
70 
-    width: 100%;
71 
-    li {
72 
-      width: 33.3%;
73 
-      float: left;
74 
-      text-align: center;
75 
-      height: 120px;
76 
-      color: #666;
77 
-      font-size: 13px;
78 
-      border-right: 1px solid #eee;
79 
-      border-bottom: 1px solid #eee;
80 
-      margin-right: -1px;
81 
-      margin-bottom: -1px;
82 
-      span {
83 
-        vertical-align: middle;
84 
-        display: flex;
85 
-        flex-direction: column;
86 
-        align-items: center;
87 
-        justify-content: center;
88 
-        height: 120px;
89 
-        img {
90 
-          display: inline-block;
91 
-          font-size: 32px;
92 
-          margin-bottom: 15px;
93 
-          color: #606266;
94 
-          transition: color 0.15s linear;
95 
-          vertical-align: middle;
96 
-        }
97 
-        .title {
98 
-          display: inline-block;
99 
-          padding: 0 3px;
100 
-          height: 30px;
101 
-          vertical-align: middle;
102 
-        }
103 
-      }
104 
-    }
105 
-  }
315 
+
316 
+.clearfix {
317 
+  clear: both;
318 
+}
319 
+
320 
+.el-upload--picture-card {
321 
+  width: 80px !important;
322 
+  height: 80px !important;
323 
+  line-height: 80px !important;
324 
+}
325 
+.tips {
326 
+  font-size: 12px;
327 
+  line-height: 18px;
106 328 
 }
107 329 
 </style>

+ 361 - 0
src/scrm_pages/site/components/used-list.vue ファイルの表示 

@@ -0,0 +1,361 @@
1 
+<template>
2 
+<div>
3 
+    <div class="used">
4 
+        <ul>
5 
+            <li>
6 
+                <span class="name">轮播图</span>
7 
+                <span class="icon">
8 
+                    <i class="el-icon-edit-outline" @click="dialogVisible = true"></i>
9 
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
10 
+                </span>
11 
+            </li>
12 
+            <li>
13 
+                <span class="name">魔方导航</span>
14 
+                <span class="icon">
15 
+                    <i class="el-icon-edit-outline" @click="eight = true"></i>
16 
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
17 
+                </span>
18 
+            </li>
19 
+            <li>
20 
+                <span class="name">医院介绍</span>
21 
+                <span class="icon">
22 
+                    <i class="el-icon-edit-outline" @click="two = true"></i>
23 
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
24 
+                </span>
25 
+            </li>
26 
+            <li>
27 
+                <span class="name">科室介绍</span>
28 
+                <span class="icon">
29 
+                    <i class="el-icon-edit-outline" @click="three = true"></i>
30 
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
31 
+                </span>
32 
+            </li>
33 
+            <li>
34 
+                <span class="name">名医介绍</span>
35 
+                <span class="icon">
36 
+                    <i class="el-icon-edit-outline" @click="four = true"></i>
37 
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
38 
+                </span>
39 
+            </li>
40 
+            <li>
41 
+                <span class="name">科室环境</span>
42 
+                <span class="icon">
43 
+                    <i class="el-icon-edit-outline" @click="five = true"></i>
44 
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
45 
+                </span>
46 
+            </li>
47 
+            <li>
48 
+                <span class="name">文章列表</span>
49 
+                <span class="icon">
50 
+                    <i class="el-icon-edit-outline" @click="six = true"></i>
51 
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
52 
+                </span>
53 
+            </li>
54 
+            <li>
55 
+                <span class="name">活动列表</span>
56 
+                <span class="icon">
57 
+                    <i class="el-icon-edit-outline" @click="seven = true"></i>
58 
+                    <i class="el-icon-delete" @click="deleteList = true"></i>
59 
+                </span>
60 
+            </li>
61 
+        </ul>
62 
+    </div>
63 
+
64 
+<!-- 确定删除组件 -->
65 
+    <el-dialog
66 
+        title="删除提示"
67 
+        :visible.sync="deleteList"
68 
+        width="550px"
69 
+        :before-close="handleClose">
70 
+        <span>确认要删除该组件吗？删除后，该组件将无法恢复</span>
71 
+        <span slot="footer" class="dialog-footer">
72 
+            <el-button @click="deleteList = false">取 消</el-button>
73 
+            <el-button type="primary" @click="deleteList = false">确 定</el-button>
74 
+        </span>
75 
+    </el-dialog>
76 
+
77 
+
78 
+  <!-- 新增轮播图 -->
79 
+  <el-dialog
80 
+    title="新增轮播图"
81 
+    :visible.sync="dialogVisible"
82 
+    width="550px"
83 
+    :before-close="handleClose">
84 
+    <el-form ref="form" :model="form" label-width="80px">
85 
+      <el-form-item label="模块标题: ">
86 
+        <el-input v-model="form.name"></el-input>
87 
+      </el-form-item>
88 
+      <el-form-item label="排序值: ">
89 
+        <el-input v-model="form.name"></el-input>
90 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
91 
+      </el-form-item>
92 
+      <el-form-item label="添加图片: ">
93 
+        <el-upload
94 
+          action="https://jsonplaceholder.typicode.com/posts/"
95 
+          list-type="picture-card"
96 
+          :on-preview="handlePictureCardPreview"
97 
+          :on-remove="handleRemove">
98 
+          <i class="el-icon-plus"></i>
99 
+        </el-upload>
100 
+      </el-form-item>
101 
+    </el-form>
102 
+    <span slot="footer" class="dialog-footer">
103 
+      <el-button @click="dialogVisible = false">取 消</el-button>
104 
+      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
105 
+    </span>
106 
+  </el-dialog>
107 
+  <!-- 新增医院介绍 -->
108 
+  <el-dialog
109 
+    title="新增医院介绍"
110 
+    :visible.sync="two"
111 
+    width="550px"
112 
+    :before-close="handleClose">
113 
+    <el-form ref="form" :model="form" label-width="80px">
114 
+      <el-form-item label="模块标题: ">
115 
+        <el-input v-model="form.name"></el-input>
116 
+      </el-form-item>
117 
+      <el-form-item label="排序值: ">
118 
+        <el-input v-model="form.name"></el-input>
119 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
120 
+      </el-form-item>
121 
+      <el-form-item label="医院介绍: ">
122 
+          <el-input
123 
+          type="textarea"
124 
+          :rows="6"
125 
+          placeholder="请输入内容"
126 
+          v-model="textarea">
127 
+        </el-input>
128 
+      </el-form-item>
129 
+    </el-form>
130 
+    <span slot="footer" class="dialog-footer">
131 
+      <el-button @click="two = false">取 消</el-button>
132 
+      <el-button type="primary" @click="two = false">确 定</el-button>
133 
+    </span>
134 
+  </el-dialog>
135 
+  <!-- 新增科室介绍 -->
136 
+  <el-dialog
137 
+    title="新增科室介绍"
138 
+    :visible.sync="three"
139 
+    width="550px"
140 
+    :before-close="handleClose">
141 
+    <el-form ref="form" :model="form" label-width="80px">
142 
+      <el-form-item label="模块标题: ">
143 
+        <el-input v-model="form.name"></el-input>
144 
+      </el-form-item>
145 
+      <el-form-item label="排序值: ">
146 
+        <el-input v-model="form.name"></el-input>
147 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
148 
+      </el-form-item>
149 
+      <el-form-item label="科室介绍: ">
150 
+           <el-input
151 
+          type="textarea"
152 
+          :rows="6"
153 
+          placeholder="请输入内容"
154 
+          v-model="textarea">
155 
+        </el-input>
156 
+      </el-form-item>
157 
+    </el-form>
158 
+    <span slot="footer" class="dialog-footer">
159 
+      <el-button @click="three = false">取 消</el-button>
160 
+      <el-button type="primary" @click="three = false">确 定</el-button>
161 
+    </span>
162 
+  </el-dialog>
163 
+
164 
+  <!-- 新增名医介绍 -->
165 
+  <el-dialog
166 
+    title="新增名医介绍"
167 
+    :visible.sync="four"
168 
+    width="550px"
169 
+    :before-close="handleClose">
170 
+    <el-form ref="form" :model="form" label-width="80px">
171 
+      <el-form-item label="模块标题: ">
172 
+        <el-input v-model="form.name"></el-input>
173 
+      </el-form-item>
174 
+      <el-form-item label="排序值: ">
175 
+        <el-input v-model="form.name"></el-input>
176 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
177 
+      </el-form-item>
178 
+      <el-form-item label="新增名医: ">
179 
+        <el-upload
180 
+          action="https://jsonplaceholder.typicode.com/posts/"
181 
+          list-type="picture-card"
182 
+          :on-preview="handlePictureCardPreview"
183 
+          :on-remove="handleRemove">
184 
+          <i class="el-icon-plus"></i>
185 
+        </el-upload>
186 
+      </el-form-item>
187 
+    </el-form>
188 
+    <span slot="footer" class="dialog-footer">
189 
+      <el-button @click="four = false">取 消</el-button>
190 
+      <el-button type="primary" @click="four = false">确 定</el-button>
191 
+    </span>
192 
+  </el-dialog>
193 
+
194 
+  <!-- 新增科室环境 -->
195 
+   <el-dialog
196 
+    title="新增科室环境"
197 
+    :visible.sync="five"
198 
+    width="550px"
199 
+    :before-close="handleClose">
200 
+    <el-form ref="form" :model="form" label-width="100px">
201 
+      <el-form-item label="模块标题: ">
202 
+        <el-input v-model="form.name"></el-input>
203 
+      </el-form-item>
204 
+      <el-form-item label="排序值: ">
205 
+        <el-input v-model="form.name"></el-input>
206 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
207 
+      </el-form-item>
208 
+      <el-form-item label="新增科室环境: ">
209 
+        <el-upload
210 
+          action="https://jsonplaceholder.typicode.com/posts/"
211 
+          list-type="picture-card"
212 
+          :on-preview="handlePictureCardPreview"
213 
+          :on-remove="handleRemove">
214 
+          <i class="el-icon-plus"></i>
215 
+        </el-upload>
216 
+      </el-form-item>
217 
+    </el-form>
218 
+    <span slot="footer" class="dialog-footer">
219 
+      <el-button @click="five = false">取 消</el-button>
220 
+      <el-button type="primary" @click="five = false">确 定</el-button>
221 
+    </span>
222 
+  </el-dialog>
223 
+
224 
+  <!-- 新增文章列表 -->
225 
+  <el-dialog
226 
+    title="新增文章列表"
227 
+    :visible.sync="six"
228 
+    width="550px"
229 
+    :before-close="handleClose">
230 
+    <el-form ref="form" :model="form" label-width="100px">
231 
+      <el-form-item label="模块标题: ">
232 
+        <el-input v-model="form.name"></el-input>
233 
+      </el-form-item>
234 
+      <el-form-item label="排序值: ">
235 
+        <el-input v-model="form.name"></el-input>
236 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
237 
+      </el-form-item>
238 
+      <el-form-item label="文章分类: ">
239 
+        <el-select v-model="form.region" placeholder="请选择活动区域" style="width:49%;float:left;">
240 
+          <el-option label="区域一" value="shanghai"></el-option>
241 
+          <el-option label="区域二" value="beijing"></el-option>
242 
+        </el-select>
243 
+        <el-select v-model="form.region" placeholder="请选择活动区域" style="width:49%;float:right;">
244 
+          <el-option label="区域一" value="shanghai"></el-option>
245 
+          <el-option label="区域二" value="beijing"></el-option>
246 
+        </el-select>
247 
+      </el-form-item>
248 
+      <el-form-item label="首页展示条数: ">
249 
+        <el-input v-model="form.name"></el-input>
250 
+      </el-form-item>
251 
+    </el-form>
252 
+    <span slot="footer" class="dialog-footer">
253 
+      <el-button @click="six = false">取 消</el-button>
254 
+      <el-button type="primary" @click="six = false">确 定</el-button>
255 
+    </span>
256 
+  </el-dialog>
257 
+
258 
+  <!-- 新增活动列表 -->
259 
+   <el-dialog
260 
+    title="新增活动列表"
261 
+    :visible.sync="seven"
262 
+    width="550px"
263 
+    :before-close="handleClose">
264 
+    <el-form ref="form" :model="form" label-width="100px">
265 
+      <el-form-item label="模块标题: ">
266 
+        <el-input v-model="form.name"></el-input>
267 
+      </el-form-item>
268 
+      <el-form-item label="排序值: ">
269 
+        <el-input v-model="form.name"></el-input>
270 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
271 
+      </el-form-item>
272 
+
273 
+      <el-form-item label="首页展示条数: ">
274 
+        <el-input v-model="form.name"></el-input>
275 
+      </el-form-item>
276 
+    </el-form>
277 
+    <span slot="footer" class="dialog-footer">
278 
+      <el-button @click="seven = false">取 消</el-button>
279 
+      <el-button type="primary" @click="seven = false">确 定</el-button>
280 
+    </span>
281 
+  </el-dialog>
282 
+
283 
+  <!-- 新增魔方导航 -->
284 
+  <el-dialog
285 
+    title="新增魔方导航"
286 
+    :visible.sync="eight"
287 
+    width="550px"
288 
+    :before-close="handleClose">
289 
+    <el-form ref="form" :model="form" label-width="100px">
290 
+      <el-form-item label="模块标题: ">
291 
+        <el-input v-model="form.name"></el-input>
292 
+      </el-form-item>
293 
+      <el-form-item label="排序值: ">
294 
+        <el-input v-model="form.name"></el-input>
295 
+        <p class="tips">请输入1-99的整数，数值越小，模块排序越靠前</p>
296 
+      </el-form-item>
297 
+      <el-form-item label="新增科室环境: ">
298 
+        <el-upload
299 
+          action="https://jsonplaceholder.typicode.com/posts/"
300 
+          list-type="picture-card"
301 
+          :on-preview="handlePictureCardPreview"
302 
+          :on-remove="handleRemove">
303 
+          <i class="el-icon-plus"></i>
304 
+        </el-upload>
305 
+      </el-form-item>
306 
+    </el-form>
307 
+    <span slot="footer" class="dialog-footer">
308 
+      <el-button @click="eight = false">取 消</el-button>
309 
+      <el-button type="primary" @click="eight = false">确 定</el-button>
310 
+    </span>
311 
+  </el-dialog>
312 
+
313 
+
314 
+</div>
315 
+
316 
+</template>
317 
+
318 
+
319 
+<script>
320 
+export default {
321 
+  name: "usedlist",
322 
+  data() {
323 
+    return {
324 
+      deleteList: false,
325 
+      two: false,
326 
+      three: false,
327 
+      four: false,
328 
+      five: false,
329 
+      six: false,
330 
+      seven: false,
331 
+      eight: false,
332 
+      dialogVisible: false,
333 
+      form: {
334 
+        name: ""
335 
+      }
336 
+    };
337 
+  }
338 
+};
339 
+</script>
340 
+
341 
+<style rel="stylesheet/scss" lang="scss" scoped>
342 
+.used {
343 
+  ul {
344 
+    li {
345 
+      height: 44px;
346 
+      line-height: 44px;
347 
+      font-size: 14px;
348 
+      display: flex;
349 
+      color: #606266;
350 
+      align-items: center;
351 
+      justify-content: space-between;
352 
+      border-bottom: 1px solid #e4e7ed;
353 
+      i {
354 
+        font-size: 19px;
355 
+        margin: 0 6px;
356 
+        cursor: pointer;
357 
+      }
358 
+    }
359 
+  }
360 
+}
361 
+</style>

+ 7 - 3
src/scrm_pages/site/preview.vue ファイルの表示 

@@ -12,14 +12,14 @@
12 12 
                                  <new-feature> </new-feature>
13 13 
                             </el-tab-pane>
14 14 
                             <el-tab-pane label="已使用" name="second">
15 
-
15 
+                                 <used-list></used-list>
16 16 
                             </el-tab-pane>
17 17 
                         </el-tabs>
18 18 
                     </el-tab-pane>
19 19 
                     <el-tab-pane label="联系我们">
20 20 
                         <el-tabs v-model="activeName" @tab-click="handleClick">
21 21 
                             <el-tab-pane label="新增模块" name="three">
22 
-
22 
+                                <add-contact></add-contact>
23 23 
                             </el-tab-pane>
24 24 
                             <el-tab-pane label="已使用" name="four">
25 25 
                                 
@@ -36,11 +36,15 @@
36 36 
 <script>
37 37 
 import BreadCrumb from "../components/bread-crumb";
38 38 
 import NewFeature from "./components/new-feature";
39 
+import UsedList from "./components/used-list";
40 
+import AddContact from "./components/add-contact";
39 41 
 export default {
40 42 
   name: "preview",
41 43 
   components: {
42 44 
     BreadCrumb,
43 
-    NewFeature
45 
+    NewFeature,
46 
+    UsedList,
47 
+    AddContact
44 48 
   },
45 49 
   data() {
46 50 
     return {

+ 44 - 0
src/styles/index.scss ファイルの表示 

@@ -499,3 +499,47 @@ code {
499 499 
   color: #C0C4CC;
500 500 
   padding: 0 3px;
501 501 
 }
502 
+
503 
+// 微网站-新增模块
504 
+.feature {
505 
+  ul {
506 
+    border: 1px solid #eaeefb;
507 
+    float: left;
508 
+    width: 100%;
509 
+    li {
510 
+      width: 33.3%;
511 
+      float: left;
512 
+      text-align: center;
513 
+      height: 120px;
514 
+      color: #666;
515 
+      font-size: 13px;
516 
+      border-right: 1px solid #eee;
517 
+      border-bottom: 1px solid #eee;
518 
+      margin-right: -1px;
519 
+      margin-bottom: -1px;
520 
+      span {
521 
+        vertical-align: middle;
522 
+        display: flex;
523 
+        flex-direction: column;
524 
+        align-items: center;
525 
+        justify-content: center;
526 
+        height: 120px;
527 
+        cursor: pointer;
528 
+        img {
529 
+          display: inline-block;
530 
+          font-size: 32px;
531 
+          margin-bottom: 15px;
532 
+          color: #606266;
533 
+          transition: color 0.15s linear;
534 
+          vertical-align: middle;
535 
+        }
536 
+        .title {
537 
+          display: inline-block;
538 
+          padding: 0 3px;
539 
+          height: 30px;
540 
+          vertical-align: middle;
541 
+        }
542 
+      }
543 
+    }
544 
+  }
545 
+}