备案号点击

src/components/Footer.vue

@@ -1,120 +1,157 @@
 <template>
-	<footer class="bg-dark">
-	    <div class="container flex-box">
-			<div class="left">
-				<div class="flex-box row" style="font-weight: 550;font-size: 18px;margin-bottom: 20px;">
-					<div>产品介绍</div>
-					<div>视频•书籍</div>
-					<div>关于功道云</div>
-				</div>
-				<div class="flex-box flex-d-wrap row">
-					<div v-for="(item, index) in navList" :key="index">
-						<div v-for="(item2, index2) in item" :key="index2"><span @click="openUrl(item2)">{{item2.name}}</span></div>
-					</div>
-				</div>
-			</div>
-			<div class="right">
-				<div style="font-size: 26px;font-weight: 600;">咨询热线：400-6877-880</div>
-				<div style="margin: 10px 0;">联系地址：广东·东江之星商业中心18栋41层02-03</div>
-				<div class="flex-box">
-					<div class="flex-box-v" v-for="(item, index) in codes" :key="index" style="margin-right:20px;text-align: center;">
-						<img style="width: 100px;height: 100px;margin-bottom: 6px;" :src="item.path" :alt="item.name">
-						<span>{{item.name}}</span>
-					</div>
-				</div>
-			</div>
-	    </div>
-		<div class="copyright_box">All Rights Reserved 广东功道云数字科技有限公司/东莞市民之网计算机网络工程有限公司 粤ICP备09157973号</div>
-		<el-dialog title="手机APP下载" :visible.sync="isShowText" width="900px">
-		  <div><img src="@/assets/images/public/APPdom.jpg" style="width:100%;"/></div>
-		</el-dialog>
-	</footer>
+  <footer class="bg-dark">
+    <div class="container flex-box">
+      <div class="left">
+        <div
+          class="flex-box row"
+          style="font-weight: 550; font-size: 18px; margin-bottom: 20px"
+        >
+          <div>产品介绍</div>
+          <div>视频•书籍</div>
+          <div>关于功道云</div>
+        </div>
+        <div class="flex-box flex-d-wrap row">
+          <div v-for="(item, index) in navList" :key="index">
+            <div v-for="(item2, index2) in item" :key="index2">
+              <span @click="openUrl(item2)">{{ item2.name }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <div style="font-size: 26px; font-weight: 600">
+          咨询热线：400-6877-880
+        </div>
+        <div style="margin: 10px 0">
+          联系地址：广东·东江之星商业中心18栋41层02-03
+        </div>
+        <div class="flex-box">
+          <div
+            class="flex-box-v"
+            v-for="(item, index) in codes"
+            :key="index"
+            style="margin-right: 20px; text-align: center"
+          >
+            <img
+              style="width: 100px; height: 100px; margin-bottom: 6px"
+              :src="item.path"
+              :alt="item.name"
+            />
+            <span>{{ item.name }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="copyright_box">
+      All Rights Reserved
+      广东功道云数字科技有限公司/东莞市民之网计算机网络工程有限公司
+      <span @click="openUrl(beianUrl)">粤ICP备09157973号</span>
+    </div>
+    <el-dialog title="手机APP下载" :visible.sync="isShowText" width="900px">
+      <div>
+        <img src="@/assets/images/public/APPdom.jpg" style="width: 100%" />
+      </div>
+    </el-dialog>
+  </footer>
 </template>
 
 <script>
-	export default {
-		name: 'Footer',
-		data() {
-		  return {
-			activeIndex: '1',
-			codes:[
-				{name:'微信扫码',path:require('@/assets/images/public/weixi-code.png')},
-				{name:'企业微信扫码',path:require('@/assets/images/public/qyweixi-code.png')},
-				{name:'进入手机端',path:require('@/assets/images/public/phone-code.png')},
-				{name:'钉钉扫码',path:require('@/assets/images/public/dd-code.png')},
-			],
-			navList:[
-				[
-					{name:'OKR目标管理软件',path:'/okr',type:1},
-					{name:'绩效管理软件',path:'/performance',type:1},
-					{name:'积分制管理软件',path:'/point',type:1},
-					{name:'现场巡检',path:'/examine',type:1},
-					{name:'人才测评',path:'https://vip.woceping.com/',type:2},
-				],
-				[
-					{name:'书籍购买',path:'/books',type:1},
-					// {name:'积分制管理视频',path:'',type:1},
-					// {name:'绩效管理视频',path:'',type:1},
-					{name:'视频课程',path:'/books',type:1}
-				],
-				[
-					{name:'公司介绍',path:'/about',type:1},
-					{name:'社会责任',path:'/society',type:1},
-					{name:'APP下载',path:'/society',type:3},
-				],
-			],
-			isShowText:false,
-		  };
-		},
-		created() {
-
-		},
-		mounted() {
-
-		},
-		methods: {
-			openUrl(item){
-				if(item.type==1){
-					 this.$router.push({path:item.path})
-				}else if(item.type==2){
-					window.open(item.path,'_blank')
-				}else{
-					this.isShowText=true;
-				}
-			}
-		}
-	}
+export default {
+  name: "Footer",
+  data() {
+    return {
+      activeIndex: "1",
+      codes: [
+        {
+          name: "微信扫码",
+          path: require("@/assets/images/public/weixi-code.png"),
+        },
+        {
+          name: "企业微信扫码",
+          path: require("@/assets/images/public/qyweixi-code.png"),
+        },
+        {
+          name: "进入手机端",
+          path: require("@/assets/images/public/phone-code.png"),
+        },
+        {
+          name: "钉钉扫码",
+          path: require("@/assets/images/public/dd-code.png"),
+        },
+      ],
+      navList: [
+        [
+          { name: "OKR目标管理软件", path: "/okr", type: 1 },
+          { name: "绩效管理软件", path: "/performance", type: 1 },
+          { name: "积分制管理软件", path: "/point", type: 1 },
+          { name: "现场巡检", path: "/examine", type: 1 },
+          { name: "人才测评", path: "https://vip.woceping.com/", type: 2 },
+        ],
+        [
+          { name: "书籍购买", path: "/books", type: 1 },
+          // {name:'积分制管理视频',path:'',type:1},
+          // {name:'绩效管理视频',path:'',type:1},
+          { name: "视频课程", path: "/books", type: 1 },
+        ],
+        [
+          { name: "公司介绍", path: "/about", type: 1 },
+          { name: "社会责任", path: "/society", type: 1 },
+          { name: "APP下载", path: "/society", type: 3 },
+        ],
+      ],
+      beianUrl: { path: "https://beian.miit.gov.cn", type: 2 },
+      isShowText: false,
+    };
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    openUrl(item) {
+      if (item.type == 1) {
+        this.$router.push({ path: item.path });
+      } else if (item.type == 2) {
+        window.open(item.path, "_blank");
+      } else {
+        this.isShowText = true;
+      }
+    },
+  },
+};
 </script>
 
 <style scoped>
-	.copyright_box {
-	    height: 44px;
-		line-height: 44px;
-	    height: auto;
-	    background: #161819;
-		text-align: center;
-		color: #ccc;
-	}
-	.bg-dark{
-		background-color:#24292d;
-		color: #d0d4d9;
-	}
-	.container{
-		max-width: 1100px;
-		margin: 0 auto;
-		padding:2rem 0 2.6rem 0;
-	}
-	.left .row div{
-		width: 200px;
-		margin-bottom: 12px;
-	}
-	.left{
-		width: 600px;
-	}
-	.row span{
-		cursor: pointer;
-	}
-	.row span:hover{
-		text-decoration:underline;
-	}
-</style>
+.copyright_box {
+  height: 44px;
+  line-height: 44px;
+  height: auto;
+  background: #161819;
+  text-align: center;
+  color: #ccc;
+}
+.copyright_box span:hover {
+  cursor: pointer;
+  color: #409eff;
+}
+.bg-dark {
+  background-color: #24292d;
+  color: #d0d4d9;
+}
+.container {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 2rem 0 2.6rem 0;
+}
+.left .row div {
+  width: 200px;
+  margin-bottom: 12px;
+}
+.left {
+  width: 600px;
+}
+.row span {
+  cursor: pointer;
+}
+.row span:hover {
+  text-decoration: underline;
+}
+</style>