完善首页设计

package.json

@@ -50,7 +50,7 @@
     "script-loader": "0.7.2",
     "serve-static": "^1.13.2",
     "svg-sprite-loader": "4.1.3",
-    "svgo": "1.2.2",
+    " o": "1.2.2",
     "vue-template-compiler": "2.6.10"
   },
   "engines": {

src/icons/svg/Float_icon_二维码.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#333333;}
+</style>
+<g id="页面1">
+	<g id="thoth_homepage" transform="translate(-1393.000000, -1477.000000)">
+		<g id="float" transform="translate(1380.000000, 1462.000000)">
+			<g id="Float_icon_二维码_def" transform="translate(13.000000, 15.000000)">
+				<path id="	" class="st0" d="M99.7,477.8c0-126.5,0-252.8,0-379.5c126.1,0,251.8,0,378.3,0
+					c0,126.4,0,252.6,0,379.5C352,477.8,226.1,477.8,99.7,477.8z M409.9,167c-81,0-161.2,0-241.2,0c0,81.2,0,161.7,0,242.2
+					c80.7,0,160.6,0,241.2,0C409.9,328.4,409.9,248.1,409.9,167z M99.9,548.5c125.9,0,251.6,0,378.1,0c0,126.5,0,252.8,0,379.6
+					c-125.8,0-251.6,0-378.1,0C99.9,801.9,99.9,675.5,99.9,548.5z M409.9,617.4c-81,0-161.2,0-241.2,0c0,81.2,0,161.8,0,242.2
+					c80.7,0,160.7,0,241.2,0C409.9,778.8,409.9,698.6,409.9,617.4z M549.3,477.9c0-126.9,0-252.9,0-379.6c126.3,0,252.3,0,378.7,0
+					c0,126.6,0,252.8,0,379.6C801.8,477.9,676.1,477.9,549.3,477.9z M617.8,166.9c0,81,0,161.6,0,242.2c81,0,161.1,0,241.2,0
+					c0-81.2,0-161.8,0-242.2C778.2,166.9,698.2,166.9,617.8,166.9z M549.5,928.2c0-126.7,0-253,0-379.6c68.7,0,136.7,0,205.9,0
+					c0,4.1,0,7.6,0,11.1c0,50.5,0.2,101-0.2,151.5c-0.1,8.5,2.5,10.7,10.5,10.6c28.1-0.5,56.1-0.2,84.2-0.2c2.9,0,5.8-0.3,9.4-0.5
+					c0-57.6,0-114.6,0-172.4c23,0,45.3,0,68.3,0c0,79.9,0,160.1,0,240.9c-79.8,0-159.4,0-240.5,0c0-57.6,0-114.8,0-172.9
+					c-22.9,0-44.4-0.1-65.9,0.2c-1.4,0-3.6,2.6-4.1,4.4c-0.7,2.5-0.3,5.4-0.3,8.1c0,95.6,0,191.2,0,286.7c0,3.8,0,7.7,0,12
+					C594,928.2,572,928.2,549.5,928.2z M687.6,928c0-34,0-67.4,0-101.7c33.9,0,67.6,0,102,0c0,33.6,0,67.3,0,101.7
+					C756.1,928,722.4,928,687.6,928z M927.9,928.3c-34.2,0-67.8,0-101.9,0c0-34.1,0-67.8,0-102.1c33.9,0,67.7,0,101.9,0
+					C927.9,860.1,927.9,893.8,927.9,928.3z M237.8,338.6c0-34.1,0-67.6,0-101.7c34.1,0,67.9,0,102.8,0c0,10.5,0,20.4,0,30.4
+					c0,21.5-0.1,42.9,0,64.4c0,4.8-0.5,8.1-6.5,8.1c-31-0.2-62-0.2-93-0.3C240.2,339.5,239.4,339,237.8,338.6z M238,789.1
+					c0-33.8,0-67.5,0-102.3c8.1,0,15.7,0,23.3,0c23.6,0,47.3,0,70.9,0c4.1,0,8.4-0.6,8.4,6c-0.1,31.7-0.1,63.5-0.1,96.3
+					C306.1,789.1,272.2,789.1,238,789.1z M688,236.8c34.3,0,67.8,0,101.6,0c0,34.3,0,68,0,102.9c-6.6,0-12.7,0-18.8,0
+					c-25.1,0-50.2,0-75.3,0c-4.8,0-8.5-0.1-8.5-7c0.3-30.5,0.1-61.1,0.2-91.6C687.3,240,687.7,238.8,688,236.8L688,236.8z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

src/icons/svg/Float_icon_二维码_蓝色.svg

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:dodgerblue;}
+</style>
+<g id="页面1">
+	<g id="thoth_homepage" transform="translate(-1393.000000, -1477.000000)">
+		<g id="float" transform="translate(1380.000000, 1462.000000)">
+			<g id="Float_icon_二维码_def" transform="translate(13.000000, 15.000000)">
+				<path id="Float_icon_二维码" class="st0" d="M99.7,477.8c0-126.5,0-252.8,0-379.5c126.1,0,251.8,0,378.3,0
+					c0,126.4,0,252.6,0,379.5C352,477.8,226.1,477.8,99.7,477.8z M409.9,167c-81,0-161.2,0-241.2,0c0,81.2,0,161.7,0,242.2
+					c80.7,0,160.6,0,241.2,0C409.9,328.4,409.9,248.1,409.9,167z M99.9,548.5c125.9,0,251.6,0,378.1,0c0,126.5,0,252.8,0,379.6
+					c-125.8,0-251.6,0-378.1,0C99.9,801.9,99.9,675.5,99.9,548.5z M409.9,617.4c-81,0-161.2,0-241.2,0c0,81.2,0,161.8,0,242.2
+					c80.7,0,160.7,0,241.2,0C409.9,778.8,409.9,698.6,409.9,617.4z M549.3,477.9c0-126.9,0-252.9,0-379.6c126.3,0,252.3,0,378.7,0
+					c0,126.6,0,252.8,0,379.6C801.8,477.9,676.1,477.9,549.3,477.9z M617.8,166.9c0,81,0,161.6,0,242.2c81,0,161.1,0,241.2,0
+					c0-81.2,0-161.8,0-242.2C778.2,166.9,698.2,166.9,617.8,166.9z M549.5,928.2c0-126.7,0-253,0-379.6c68.7,0,136.7,0,205.9,0
+					c0,4.1,0,7.6,0,11.1c0,50.5,0.2,101-0.2,151.5c-0.1,8.5,2.5,10.7,10.5,10.6c28.1-0.5,56.1-0.2,84.2-0.2c2.9,0,5.8-0.3,9.4-0.5
+					c0-57.6,0-114.6,0-172.4c23,0,45.3,0,68.3,0c0,79.9,0,160.1,0,240.9c-79.8,0-159.4,0-240.5,0c0-57.6,0-114.8,0-172.9
+					c-22.9,0-44.4-0.1-65.9,0.2c-1.4,0-3.6,2.6-4.1,4.4c-0.7,2.5-0.3,5.4-0.3,8.1c0,95.6,0,191.2,0,286.7c0,3.8,0,7.7,0,12
+					C594,928.2,572,928.2,549.5,928.2z M687.6,928c0-34,0-67.4,0-101.7c33.9,0,67.6,0,102,0c0,33.6,0,67.3,0,101.7
+					C756.1,928,722.4,928,687.6,928z M927.9,928.3c-34.2,0-67.8,0-101.9,0c0-34.1,0-67.8,0-102.1c33.9,0,67.7,0,101.9,0
+					C927.9,860.1,927.9,893.8,927.9,928.3z M237.8,338.6c0-34.1,0-67.6,0-101.7c34.1,0,67.9,0,102.8,0c0,10.5,0,20.4,0,30.4
+					c0,21.5-0.1,42.9,0,64.4c0,4.8-0.5,8.1-6.5,8.1c-31-0.2-62-0.2-93-0.3C240.2,339.5,239.4,339,237.8,338.6z M238,789.1
+					c0-33.8,0-67.5,0-102.3c8.1,0,15.7,0,23.3,0c23.6,0,47.3,0,70.9,0c4.1,0,8.4-0.6,8.4,6c-0.1,31.7-0.1,63.5-0.1,96.3
+					C306.1,789.1,272.2,789.1,238,789.1z M688,236.8c34.3,0,67.8,0,101.6,0c0,34.3,0,68,0,102.9c-6.6,0-12.7,0-18.8,0
+					c-25.1,0-50.2,0-75.3,0c-4.8,0-8.5-0.1-8.5-7c0.3-30.5,0.1-61.1,0.2-91.6C687.3,240,687.7,238.8,688,236.8L688,236.8z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

src/icons/svg/Float_icon_反馈.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#333333;}
+</style>
+<g id="页面1">
+	<g id="thoth_homepage" transform="translate(-1393.000000, -1521.000000)">
+		<g id="float" transform="translate(1380.000000, 1462.000000)">
+			<g id="Float_icon_反馈_def" transform="translate(13.000000, 59.000000)">
+				<g id="Float_icon_反馈" transform="translate(1.000000, 0.000000)">
+					<g id="路径">
+						<g>
+							<polygon class="st0" points="862,959 134,959 134,99.4 666.2,99.4 666.2,169.6 204.1,169.6 204.1,888.8 791.8,888.8 
+								791.8,300.9 862,300.9 							"/>
+						</g>
+					</g>
+					<g id="直线-3">
+						<g>
+							<polygon class="st0" points="621.7,413.8 924,111.5 877.5,65 575.2,367.3 563.8,428.1 							"/>
+						</g>
+					</g>
+					<g id="直线-4">
+						<g>
+							<rect x="272.7" y="430.5" class="st0" width="197.4" height="65.8"/>
+						</g>
+					</g>
+					<g id="直线-4_1_">
+						<g>
+							<rect x="272.7" y="562.1" class="st0" width="460.5" height="65.8"/>
+						</g>
+					</g>
+				</g>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

src/icons/svg/Float_icon_反馈_蓝色.svg

@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:dodgerblue;}
+</style>
+<g id="页面1">
+	<g id="thoth_homepage" transform="translate(-1393.000000, -1521.000000)">
+		<g id="float" transform="translate(1380.000000, 1462.000000)">
+			<g id="Float_icon_反馈_def" transform="translate(13.000000, 59.000000)">
+				<g id="Float_icon_反馈" transform="translate(1.000000, 0.000000)">
+					<g id="路径">
+						<g>
+							<polygon class="st0" points="862,959 134,959 134,99.4 666.2,99.4 666.2,169.6 204.1,169.6 204.1,888.8 791.8,888.8 
+								791.8,300.9 862,300.9 							"/>
+						</g>
+					</g>
+					<g id="直线-3">
+						<g>
+							<polygon class="st0" points="621.7,413.8 924,111.5 877.5,65 575.2,367.3 563.8,428.1 							"/>
+						</g>
+					</g>
+					<g id="直线-4">
+						<g>
+							<rect x="272.7" y="430.5" class="st0" width="197.4" height="65.8"/>
+						</g>
+					</g>
+					<g id="直线-4_1_">
+						<g>
+							<rect x="272.7" y="562.1" class="st0" width="460.5" height="65.8"/>
+						</g>
+					</g>
+				</g>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

src/icons/svg/banner_icon_arrow.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#DBDBDB;}
+</style>
+<g id="页面1">
+	<g id="thoth_homepage" transform="translate(-705.000000, -740.000000)">
+		<g id="banner">
+			<g id="banner_icon_arrow" transform="translate(705.000000, 740.000000)">
+				<path class="st0" d="M509.4,790.2L906.9,475c12.2-10.6,31.8-10.7,43.9-0.3c12,10.4,11.9,27.5-0.3,38.1L530.9,847.2
+					c-12.2,10.6-31.8,10.7-43.9,0.3L73.3,518.2c-12-10.4-11.9-27.5,0.3-38.1s31.8-10.7,43.9-0.3L509.4,790.2z M509.4,492
+					l397.5-315.2c12.2-10.6,31.8-10.7,43.9-0.3c12,10.4,11.9,27.5-0.3,38.1L530.9,549c-12.2,10.6-31.8,10.7-43.9,0.3L73.3,220
+					c-12-10.4-11.9-27.5,0.3-38.1s31.8-10.7,43.9-0.3L509.4,492z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

src/icons/svg/float_反馈_icon_close.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#979797;}
+</style>
+<g id="页面1">
+	<g id="thoth_homepage_浮窗_反馈1" transform="translate(-1330.000000, -410.000000)">
+		<g id="float_反馈_click" transform="translate(964.000000, 386.000000)">
+			<g id="float_反馈_icon_close" transform="translate(366.000000, 24.000000)">
+				<path class="st0" d="M573.2,511l341.9,341.9c17.2,17.2,17.2,45,0,62.2c-17.2,17.2-45,17.2-62.2,0L511,573.2L169.1,915.1
+					c-17.2,17.2-45,17.2-62.2,0c-17.2-17.2-17.2-45,0-62.2L448.9,511L106.9,169.1c-17.2-17.2-17.2-45,0-62.2s45-17.2,62.2,0
+					L511,448.8L853,106.9c17.2-17.2,45-17.2,62.2,0c17.2,17.2,17.2,45,0,62.2L573.2,511z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

src/icons/svg/float_反馈_icon_下拉.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#D6D6D6;}
+</style>
+<g id="页面1">
+	<g id="thoth_homepage_浮窗_反馈1" transform="translate(-1311.000000, -521.000000)">
+		<g id="float_反馈_click" transform="translate(964.000000, 386.000000)">
+			<g id="float_反馈_icon_下拉" transform="translate(347.000000, 135.000000)">
+				<g>
+					<path class="st0" d="M512,757c-11,0-22-4.2-30.3-12.6L77.4,340.2c-16.7-16.7-16.7-43.9,0-60.6s43.9-16.7,60.6,0l374,374
+						l374-374c16.7-16.7,43.9-16.7,60.6,0c16.7,16.7,16.7,43.9,0,60.6L542.3,744.5C534,752.8,523,757,512,757z"/>
+				</g>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

src/views/home/floatMenu.vue

@@ -1,48 +1,106 @@
 <template>
   <div class="div-menu">
-    <el-button icon="el-icon-question" size="small" plain @click="openWiki" /><br>
-    <el-button class="button-dingding" icon="el-icon-chat-dot-square" size="small" plain /><br>
-    <el-card class="dingding-image">
+    <div class="div-button-QRCode" @click="QRCodeClick"><svg-icon :icon-class="QRCodeClassName" /></div>
+    <el-card class="QRCode">
+      <div class="QRCode-title">钉钉客服群</div>
       <el-image :src="imgUrl" style="margin: 0" />
     </el-card>
+    <div class="div-button-feedback" @click="feedBackClick"><svg-icon :icon-class="feedbackClassName" /></div>
+    <el-card class="feedback" :style="display">
+      <div style="font-size: 12pt;color: #666666;margin: 5pt 0 20pt 15pt;">意见反馈</div>
+      <div style="display:inline-block;font-size: 10pt;color: #666666;margin: 5pt 0 0 15pt">反馈类型</div>
+    </el-card>
   </div>
 </template>
 
 <style scoped>
-.el-button {
-  opacity: 0.7;
-}
 .div-menu {
-  width: auto;
+  width: 33pt;
+  height: 70.5pt;
+  background: #FFFFFF;
+  box-shadow: 0 1px 10px 0 rgba(0,0,0,0.10);
+  border-radius: 2px;
+}
+.div-menu:hover {
+  cursor: pointer;
 }
-.dingding-image {
+.QRCode-title {
+  margin-bottom: 12.75pt;
+  font-size: 9pt;
+  color: #333333;
+  text-align: center;
+}
+.QRCode {
+  position: absolute;
   display: none;
-  width: 250px;
-  height: 320px;
-  right: 110%;
-  bottom: -7%;
+  width: 183pt;
+  height: 207pt;
+  right: 120%;
+  bottom: 0;
   padding: 0;
 }
-.button-dingding:hover ~ .dingding-image {
+.div-button-QRCode:hover ~ .QRCode {
   display: block;
+}
+.div-button-QRCode {
+  text-align: center;
+  padding-top: 30%;
+  height: 50%;
+}
+.div-button-feedback {
+  width: 100%;
+  text-align: center;
+  padding-top: 30%;
+  border-top: 0.5pt solid #E0E0E0;
+}
+.feedback {
   position: absolute;
+  display: none;
+  width: 300pt;
+  height: 277.5pt;
+  bottom: 0;
+  right: 120%;
 }
 </style>
 
 <script>
-import imgUrl from '@/assets/home_images/ecode_占位@3x.png'
+import imgUrl from '@/assets/home_images/客服群二维码.png'
 
 export default {
   name: 'FloatMenu',
   data() {
     return {
       isActive: true,
-      imgUrl: imgUrl
+      imgUrl: imgUrl,
+      feedbackClassName: 'Float_icon_反馈',
+      QRCodeClassName: 'Float_icon_二维码',
+      display: 'display: none;',
+      feedBackForm: {
+        style: '',
+        moduleName: '',
+        content: ''
+      }
     }
   },
   methods: {
     openWiki() {
       window.open('http://wiki.intra.xiaojukeji.com/pages/viewpage.action?pageId=174012208')
+    },
+    feedBackClick() {
+      if (this.feedbackClassName === 'Float_icon_反馈') {
+        this.feedbackClassName = 'Float_icon_反馈_蓝色'
+        this.display = 'display: block;'
+      } else if (this.feedbackClassName === 'Float_icon_反馈_蓝色') {
+        this.feedbackClassName = 'Float_icon_反馈'
+        this.display = 'display: none;'
+      }
+    },
+    QRCodeClick() {
+      if (this.QRCodeClassName === 'Float_icon_二维码') {
+        this.QRCodeClassName = 'Float_icon_二维码_蓝色'
+      } else if (this.QRCodeClassName === 'Float_icon_二维码_蓝色') {
+        this.QRCodeClassName = 'Float_icon_二维码'
+      }
     }
   }
 }

src/views/home/index.vue

@@ -25,6 +25,11 @@
     <div style="height: 600pt;width 100%;text-align: center;">
       <div style="font-size: 21pt;margin-top: 54pt;color: #333333;">功能介绍</div>
       <el-card style="margin-left: 0;margin-top: 42pt" shadow="hover">
+        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_流程管控@3x.png">
+        <div class="div-title">流程管控</div>
+        <div class="div-module-introduction">这是一段关于该功能的结束,结束文字控在两行内</div>
+      </el-card>
+      <el-card shadow="hover">
         <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_自动化@3x.png">
         <div class="div-title">自动化</div>
         <div class="div-module-introduction">这是一段关于该功能的结束,结束文字控在两行内</div>
@@ -34,13 +39,13 @@
         <div class="div-title">数据中心</div>
         <div class="div-module-introduction">这是一段关于该功能的结束,结束文字控在两行内</div>
       </el-card>
-      <el-card shadow="hover">
+      <br>
+      <el-card style="margin-left: 0;margin-top: 36pt;" shadow="hover">
         <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_环境平台@3x.png">
         <div class="div-title">环境平台</div>
         <div class="div-module-introduction">这是一段关于该功能的结束,结束文字控在两行内</div>
       </el-card>
-      <br>
-      <el-card style="margin-left: 0;margin-top: 36pt;" shadow="hover">
+      <el-card shadow="hover">
         <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_服务mock@3x.png">
         <div class="div-title">服务mock</div>
         <div class="div-module-introduction">这是一段关于该功能的结束,结束文字控在两行内</div>
@@ -50,11 +55,6 @@
         <div class="div-title">虚拟硬件</div>
         <div class="div-module-introduction">这是一段关于该功能的结束,结束文字控在两行内</div>
       </el-card>
-      <el-card shadow="hover">
-        <img class="image-module-logo" src="@/assets/home_images/功能介绍_icon_badcase挖掘@3x.png">
-        <div class="div-title">bad case 挖掘</div>
-        <div class="div-module-introduction">这是一段关于该功能的结束,结束文字控在两行内</div>
-      </el-card>
     </div>
     <div style="height: 180pt;width 100%;background-color: #1B2341;">
       <el-row style="top: 25%;left: 15.3%;">