Merge branch 'master' of http://192.168.0.115:3000/tangning/personalhubs

components.d.ts

@@ -25,11 +25,13 @@ declare module '@vue/runtime-core' {
     IconCommunity: typeof import('./src/components/icons/IconCommunity.vue')['default']
     IconDocumentation: typeof import('./src/components/icons/IconDocumentation.vue')['default']
     IconEcosystem: typeof import('./src/components/icons/IconEcosystem.vue')['default']
+    Icons: typeof import('./src/components/icons/index.vue')['default']
     IconSupport: typeof import('./src/components/icons/IconSupport.vue')['default']
     IconTooling: typeof import('./src/components/icons/IconTooling.vue')['default']
     MemberTable: typeof import('./src/components/MemberTable.vue')['default']
     Mobile: typeof import('./src/components/mobile/index.vue')['default']
     Pc: typeof import('./src/components/pc/index.vue')['default']
+    Popup: typeof import('./src/components/popup/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     TheWelcome: typeof import('./src/components/TheWelcome.vue')['default']

src/App.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
+import '@/assets/style/iconfont.css'
 import { RouterView } from 'vue-router'
+import { onMounted } from 'vue'
+onMounted(() => {
+  window.onresize = () => {
+    console.log('window.onresize');
+  }
+})
 </script>
 
 <template>

src/assets/images/footer/dy.svg

@@ -0,0 +1,17 @@
+<svg id="WKND-button-standard" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #ebebeb;
+      }
+
+      .cls-2 {
+        fill: #323233;
+      }
+    </style>
+  </defs>
+  <rect id="background" class="cls-1" width="48" height="48"/>
+  <g id="douyin" transform="translate(14.969 14.22)">
+    <path id="路径_3717" data-name="路径 3717" class="cls-2" d="M892.085,39.21a4.8,4.8,0,0,1-2.179-4H886.47l0,13.767a2.887,2.887,0,1,1-2.884-3,2.766,2.766,0,0,1,.853.136V42.606a6.117,6.117,0,0,0-.853-.061,6.323,6.323,0,1,0,6.323,6.323v-6.98a8.169,8.169,0,0,0,4.778,1.536V39.989a4.767,4.767,0,0,1-2.6-.779Z" transform="translate(-877.259 -35.206)"/>
+  </g>
+</svg>

src/assets/main.css

@@ -11,10 +11,33 @@ a,
   color: hsla(160, 100%, 37%, 1);
   transition: 0.4s;
 }
+::-webkit-scrollbar-track-piece {
+  background-color: #fff;
+  -webkit-border-radius: 0;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
 
+::-webkit-scrollbar-thumb {
+  height: 50px;
+  background-color: #ddd;
+  -webkit-border-radius: 4px;
+  outline: 2px solid #fff;
+  outline-offset: -2px;
+  border: 2px solid #fff;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  height: 50px;
+  background-color: #9f9f9f;
+  -webkit-border-radius: 4px;
+}
 @media (hover: hover) {
   a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
+    /* background-color: hsla(160, 100%, 37%, 0.2); */
   }
 }
 

src/assets/style/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/style/iconfont.css

@@ -0,0 +1,795 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 941679 */
+  src: url('iconfont.woff2?t=1739950179418') format('woff2'),
+       url('iconfont.woff?t=1739950179418') format('woff'),
+       url('iconfont.ttf?t=1739950179418') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-uploading_e57:before {
+  content: "\e77f";
+}
+
+.icon-person_e:before {
+  content: "\e775";
+}
+
+.icon-menu_format:before {
+  content: "\e76f";
+}
+
+.icon-icon_share:before {
+  content: "\e75d";
+}
+
+.icon-menu_copy:before {
+  content: "\e75e";
+}
+
+.icon-swsd-v:before {
+  content: "\e6c6";
+}
+
+.icon-swsd:before {
+  content: "\e6c4";
+}
+
+.icon-menu_update:before {
+  content: "\e6b8";
+}
+
+.icon-top:before {
+  content: "\e6b7";
+}
+
+.icon-logo1:before {
+  content: "\e692";
+}
+
+.icon-more:before {
+  content: "\e6b6";
+}
+
+.icon-shop_car:before {
+  content: "\e6b5";
+}
+
+.icon-scene_c:before {
+  content: "\e6b4";
+}
+
+.icon-international:before {
+  content: "\e6b3";
+}
+
+.icon-next:before {
+  content: "\e6b1";
+}
+
+.icon-back:before {
+  content: "\e6b2";
+}
+
+.icon-logo-4dage-en:before {
+  content: "\e6af";
+}
+
+.icon-logo-4dage-cn:before {
+  content: "\e6b0";
+}
+
+.icon-share:before {
+  content: "\e6ae";
+}
+
+.icon-unbind:before {
+  content: "\e6aa";
+}
+
+.icon-show:before {
+  content: "\e740";
+}
+
+.icon-file:before {
+  content: "\e63c";
+}
+
+.icon-folder1:before {
+  content: "\e643";
+}
+
+.icon-Twitter:before {
+  content: "\e630";
+}
+
+.icon-Facebook:before {
+  content: "\e631";
+}
+
+.icon-play:before {
+  content: "\e62f";
+}
+
+.icon-ar:before {
+  content: "\e62b";
+}
+
+.icon-cloud1:before {
+  content: "\e62c";
+}
+
+.icon-sdk:before {
+  content: "\e62d";
+}
+
+.icon-siwei:before {
+  content: "\e62e";
+}
+
+.icon-link:before {
+  content: "\e626";
+}
+
+.icon-QQ:before {
+  content: "\e627";
+}
+
+.icon-weixin1:before {
+  content: "\e628";
+}
+
+.icon-weibo:before {
+  content: "\e629";
+}
+
+.icon-new_folder:before {
+  content: "\e618";
+}
+
+.icon-new_camera:before {
+  content: "\e616";
+}
+
+.icon-menu_cooperation1:before {
+  content: "\e615";
+}
+
+.icon-phone1:before {
+  content: "\e613";
+}
+
+.icon-mail1:before {
+  content: "\e614";
+}
+
+.icon-del:before {
+  content: "\e612";
+}
+
+.icon-mall:before {
+  content: "\e60d";
+}
+
+.icon-look_flatten:before {
+  content: "\e697";
+}
+
+.icon-look_list:before {
+  content: "\e699";
+}
+
+.icon-look_date:before {
+  content: "\e69a";
+}
+
+.icon-look_position:before {
+  content: "\e69b";
+}
+
+.icon-look_like:before {
+  content: "\e69c";
+}
+
+.icon-look_share:before {
+  content: "\e69d";
+}
+
+.icon-look_watch:before {
+  content: "\e69e";
+}
+
+.icon-look_people:before {
+  content: "\e69f";
+}
+
+.icon-download:before {
+  content: "\e685";
+}
+
+.icon-list_delete:before {
+  content: "\e780";
+}
+
+.icon-vip_wrong:before {
+  content: "\e682";
+}
+
+.icon-vip_right:before {
+  content: "\e683";
+}
+
+.icon-menu_rename:before {
+  content: "\e60f";
+}
+
+.icon-menu_panorama:before {
+  content: "\e610";
+}
+
+.icon-menu_move:before {
+  content: "\e611";
+}
+
+.icon-view_screen:before {
+  content: "\e609";
+}
+
+.icon-data_time:before {
+  content: "\e60c";
+}
+
+.icon-folder_bg:before {
+  content: "\e75c";
+}
+
+.icon-arrow-copy:before {
+  content: "\e781";
+}
+
+.icon-arrow:before {
+  content: "\e744";
+}
+
+.icon-folder:before {
+  content: "\e745";
+}
+
+.icon-address:before {
+  content: "\e746";
+}
+
+.icon-cam_cloud:before {
+  content: "\e747";
+}
+
+.icon-list_menu:before {
+  content: "\e748";
+}
+
+.icon-choose:before {
+  content: "\e749";
+}
+
+.icon-mail:before {
+  content: "\e74a";
+}
+
+.icon-nav_order:before {
+  content: "\e74b";
+}
+
+.icon-preview:before {
+  content: "\e74c";
+}
+
+.icon-nav_cam:before {
+  content: "\e74d";
+}
+
+.icon-phone:before {
+  content: "\e74e";
+}
+
+.icon-nav_scene:before {
+  content: "\e74f";
+}
+
+.icon-plus:before {
+  content: "\e750";
+}
+
+.icon-nav_my:before {
+  content: "\e751";
+}
+
+.icon-nav_data:before {
+  content: "\e752";
+}
+
+.icon-search:before {
+  content: "\e753";
+}
+
+.icon-reduce:before {
+  content: "\e754";
+}
+
+.icon-share_link:before {
+  content: "\e755";
+}
+
+.icon-register_help:before {
+  content: "\e756";
+}
+
+.icon-register_agreement:before {
+  content: "\e757";
+}
+
+.icon-share_qq:before {
+  content: "\e758";
+}
+
+.icon-share_wx:before {
+  content: "\e759";
+}
+
+.icon-share_wb:before {
+  content: "\e75a";
+}
+
+.icon-view_list:before {
+  content: "\e75b";
+}
+
+.icon-main_list:before {
+  content: "\e737";
+}
+
+.icon-main_grid:before {
+  content: "\e738";
+}
+
+.icon-hengbiaoEN:before {
+  content: "\e6a4";
+}
+
+.icon-queren:before {
+  content: "\e695";
+}
+
+.icon-jingshi:before {
+  content: "\e693";
+}
+
+.icon-mimabukejian:before {
+  content: "\e691";
+}
+
+.icon-mimakejian:before {
+  content: "\e690";
+}
+
+.icon-huidingyejianzui:before {
+  content: "\e68f";
+}
+
+.icon-logo:before {
+  content: "\e71f";
+}
+
+.icon-xingouwuche:before {
+  content: "\e68e";
+}
+
+.icon-duihao:before {
+  content: "\e68d";
+}
+
+.icon-tanhao:before {
+  content: "\e68c";
+}
+
+.icon-gouwuche:before {
+  content: "\e68b";
+}
+
+.icon-shouyegongzi:before {
+  content: "\e68a";
+}
+
+.icon-case_teamwork:before {
+  content: "\e709";
+}
+
+.icon-case_hot:before {
+  content: "\e704";
+}
+
+.icon-case_recommend:before {
+  content: "\e705";
+}
+
+.icon-case_new:before {
+  content: "\e706";
+}
+
+.icon-teaching:before {
+  content: "\e6bb";
+}
+
+.icon-ctmservice:before {
+  content: "\e6ba";
+}
+
+.icon-month2:before {
+  content: "\e6ad";
+}
+
+.icon-month1:before {
+  content: "\e6ac";
+}
+
+.icon-year:before {
+  content: "\e6ab";
+}
+
+.icon-month:before {
+  content: "\e6a9";
+}
+
+.icon-vas:before {
+  content: "\e6a8";
+}
+
+.icon-home:before {
+  content: "\e6a7";
+}
+
+.icon-edit:before {
+  content: "\e6a6";
+}
+
+.icon-choice:before {
+  content: "\e6a5";
+}
+
+.icon-cloud:before {
+  content: "\e698";
+}
+
+.icon-all:before {
+  content: "\e696";
+}
+
+.icon-eye:before {
+  content: "\e694";
+}
+
+.icon-forbid:before {
+  content: "\e677";
+}
+
+.icon-close:before {
+  content: "\e676";
+}
+
+.icon-fazhanjihui:before {
+  content: "\e675";
+}
+
+.icon-dianmianbuzhi:before {
+  content: "\e674";
+}
+
+.icon-xuanchuanziliao:before {
+  content: "\e673";
+}
+
+.icon-zhuanshukefu:before {
+  content: "\e672";
+}
+
+.icon-lirunfencheng:before {
+  content: "\e671";
+}
+
+.icon-jingxiaoshang:before {
+  content: "\e670";
+}
+
+.icon-baoxiutiaokuan:before {
+  content: "\e66f";
+}
+
+.icon-jiantou:before {
+  content: "\e66e";
+}
+
+.icon-vip_false:before {
+  content: "\e66b";
+}
+
+.icon-vip_true:before {
+  content: "\e66d";
+}
+
+.icon-jianhao:before {
+  content: "\e66a";
+}
+
+.icon-jiahao:before {
+  content: "\e669";
+}
+
+.icon-and:before {
+  content: "\e668";
+}
+
+.icon-cart:before {
+  content: "\e667";
+}
+
+.icon-liulan:before {
+  content: "\e666";
+}
+
+.icon-bianji:before {
+  content: "\e665";
+}
+
+.icon-dianlang:before {
+  content: "\e664";
+}
+
+.icon-3d:before {
+  content: "\e663";
+}
+
+.icon-sfm:before {
+  content: "\e662";
+}
+
+.icon-qiumu:before {
+  content: "\e661";
+}
+
+.icon-haisi:before {
+  content: "\e660";
+}
+
+.icon-sony:before {
+  content: "\e65f";
+}
+
+.icon-kaiguan1:before {
+  content: "\e65e";
+}
+
+.icon-kaiguan:before {
+  content: "\e65d";
+}
+
+.icon-ser_manual:before {
+  content: "\e652";
+}
+
+.icon-shang:before {
+  content: "\e65c";
+}
+
+.icon-xia:before {
+  content: "\e65b";
+}
+
+.icon-yuandian:before {
+  content: "\e65a";
+}
+
+.icon--sanwei:before {
+  content: "\e601";
+}
+
+.icon-icon-test:before {
+  content: "\e649";
+}
+
+.icon-icon-test1:before {
+  content: "\e64a";
+}
+
+.icon-icon-test2:before {
+  content: "\e608";
+}
+
+.icon-icon-test3:before {
+  content: "\e64c";
+}
+
+.icon-icon-test4:before {
+  content: "\e64d";
+}
+
+.icon-lianxi:before {
+  content: "\e64e";
+}
+
+.icon-kehu:before {
+  content: "\e650";
+}
+
+.icon-meiti:before {
+  content: "\e653";
+}
+
+.icon-yewu:before {
+  content: "\e654";
+}
+
+.icon--xuanzhe-copy:before {
+  content: "\e655";
+}
+
+.icon--xuanzhe-copy-copy:before {
+  content: "\e656";
+}
+
+.icon-zuo:before {
+  content: "\e657";
+}
+
+.icon-you:before {
+  content: "\e659";
+}
+
+.icon--renren:before {
+  content: "\e64f";
+}
+
+.icon--AI:before {
+  content: "\e651";
+}
+
+.icon-tech_space_location:before {
+  content: "\e648";
+}
+
+.icon-tech_space_modeling:before {
+  content: "\e646";
+}
+
+.icon-tech_space_display:before {
+  content: "\e645";
+}
+
+.icon-tutorial:before {
+  content: "\e642";
+}
+
+.icon-protocol:before {
+  content: "\e641";
+}
+
+.icon-service:before {
+  content: "\e640";
+}
+
+.icon-appdown:before {
+  content: "\e63f";
+}
+
+.icon-faq:before {
+  content: "\e63e";
+}
+
+.icon-industry_realty:before {
+  content: "\e63b";
+}
+
+.icon-industry_museum:before {
+  content: "\e63a";
+}
+
+.icon-industry_industry:before {
+  content: "\e639";
+}
+
+.icon-industry_ecom:before {
+  content: "\e637";
+}
+
+.icon-industry_catering:before {
+  content: "\e636";
+}
+
+.icon-industry_app:before {
+  content: "\e635";
+}
+
+.icon-icon_cam_pro:before {
+  content: "\e634";
+}
+
+.icon-icon_cam_lite:before {
+  content: "\e633";
+}
+
+.icon-icon_cam_fitting:before {
+  content: "\e632";
+}
+
+.icon-cuowu:before {
+  content: "\e647";
+}
+
+.icon-guanbi:before {
+  content: "\e60b";
+}
+
+.icon-logo_a:before {
+  content: "\e605";
+}
+
+.icon-logo_b:before {
+  content: "\e607";
+}
+
+.icon-douyin:before {
+  content: "\e602";
+}
+
+.icon-chat:before {
+  content: "\e603";
+}
+
+.icon-geren:before {
+  content: "\e606";
+}
+
+.icon-xinlang:before {
+  content: "\e60a";
+}
+
+.icon-facebook:before {
+  content: "\e62a";
+}
+
+.icon-tisheng:before {
+  content: "\e604";
+}
+
+.icon-pingguo:before {
+  content: "\e658";
+}
+
+.icon-youjiantou:before {
+  content: "\e600";
+}
+
+.icon-weixin:before {
+  content: "\e64b";
+}
+
+.icon-ins:before {
+  content: "\e63d";
+}
+
+.icon-sousuo:before {
+  content: "\e619";
+}
+
+.icon-anzhuo:before {
+  content: "\e66c";
+}
+
+.icon-dui:before {
+  content: "\e61f";
+}
+

src/components/icons/index.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const props = defineProps({
+  prefixCls: {
+    type: String,
+    default: 'icon',
+  },
+  type: {
+    type: String,
+    default: 'icon',
+  },
+})
+</script>
+<template>
+  <i
+    class="iconfont"
+    :class="{ [`${prefixCls}-${type}`]: type }"
+    v-bind="$attrs"
+  />
+</template>
+
+
+<style lang="less">
+
+</style>

src/components/install.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import HIcon from "./icons/index.vue";
+
+export default {
+  install(app: App) {
+    app.component("HIcon", HIcon);
+  }
+}

src/components/pc/data.ts

@@ -0,0 +1,80 @@
+
+export const pcFooter = (t:any) => {
+  return [
+  {
+    title: t('header.core_product'),
+    list: [
+      {
+        text: t('manage.sceneAdmin.sdsg'),
+        link: 'Meta'
+      },
+      {
+        text: t('header.Mega'),
+        link: 'Mega'
+      },
+      {
+        text: t('header.kankanMinion'),
+        link: 'Minion'
+      },
+      {
+        text: t('header.mallPro'),
+        link: 'KanKan'
+      }
+    ]
+  },
+  {
+    title: t('header.solutions'),
+    list: [
+      {
+        text: t('header.solutionsExi'),
+        link: 'solutions/smartCity'
+      },
+      {
+        text: t('header.solutionsSubject'),
+        link: 'solutions/museum'
+      },
+      {
+        text: t('header.solutionsSec'),
+        link: 'solutions/government'
+      },
+      {
+        text: t('header.solutionsHouse'),
+        link: 'solutions/property'
+      },
+    ]
+  },
+  {
+    title: t('header.service'),
+    list: [
+      {
+        text: t('header.serviceApp'),
+        link: 'service/app/pro'
+      }, {
+        text: t('service.help'),
+        link: 'service/use/help'
+      },
+      {
+        text: t('header.serviceBaoxiu'),
+        link: 'service/clause/pro'
+      },
+    ]
+  },
+  {
+    title: t('header.about'),
+    list: [
+      {
+        text: t('header.aboutCompany'),
+        link: 'about'
+      },
+      {
+        text: t('header.aboutNews'),
+        link: 'news'
+      },
+      {
+        text: t('header.aboutAgent'),
+        link: 'distributor'
+      }
+    ]
+  }
+]
+}

src/components/pc/footer.vue

@@ -1,11 +1,62 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import logoCn from '@/assets/images/logoCn.png'
 import logoEn from '@/assets/images/logoEn.png'
+import wechat from '@/assets/images/footer/wechat.svg'
+import wb from '@/assets/images/footer/wb.svg'
+import dy from '@/assets/images/footer/dy.svg'
+import { pcFooter } from './data'
+const { locale: language, t } = useI18n()
+const infosList = pcFooter(t)
 </script>
 
 <template>
-  <div class="footer">
-    <div class="contentPage">
+  <div class="footer relative">
+    <div class="layout container">
+      <div class="infos clear flex justify-between">
+        <div class="infos-contact">
+          <img :src="language === 'zh' ? logoCn : logoEn" alt="logo" class="logo" />
+          <ul>
+            <li>{{ t('header.footer.saleEmail') }}：sales@4dage.com</li>
+            <li>{{ t('header.footer.meitiEmail') }}：pr@4dage.com</li>
+            <li>{{ t('header.footer.phone') }}：400-669-8025</li>
+          </ul>
+        </div>
+        <div class="infos-list">
+          <div class="infos-item" v-for="item in infosList" :key="item.title">
+            <h6>{{ item.title }}</h6>
+            <a v-for="i in item.list" :key="i.text" target="_blank" @click="toLink(i)">{{
+              i.text
+            }}</a>
+          </div>
+        </div>
+        <ul class="contacts-w">
+          <popup :icon="wechat" :hovericon="wechat" :code="`${$cdn}images/code_wx.jpg`" />
+          <popup :icon="wb" :hovericon="wb" :code="`${$cdn}images/code_wb.jpg`" />
+          <popup :icon="dy" :hovericon="dy" :code="`${$cdn}images/code_dy.jpg`" />
+        </ul>
+      </div>
+      <div class="relevant clear flex justify-between">
+        <p class="relevant-1">Copyright © 2022 4DAGE Co., Ltd. All rights reserved.</p>
+        <p class="relevant-2">
+          <a
+            target="_blank"
+            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44049102496647"
+            class="a_class"
+          >
+            <img src="@/assets/images/baicon.png" alt="" />
+            粤公网安备 44049102496647号
+          </a>
+          <a target="_blank" href="https://beian.miit.gov.cn/" class="a_class">
+            <img src="@/assets/images/baicon.png" alt="" />
+            粤ICP备14078495号
+          </a>
+          <!-- </p>
+        <p class="relevant-2"> -->
+        </p>
+      </div>
+    </div>
+    <!-- <div class="contentPage">
       <div class="relevant clear">
         <p class="relevant-1">Copyright © 2022 4DAGE Co., Ltd. All rights reserved.</p>
         <span>
@@ -27,57 +78,114 @@ import logoEn from '@/assets/images/logoEn.png'
         </p>
         </span>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 <style lang="less" scoped>
 .footer {
+  padding-top: 76px 0 26px;
+  background-color: #323233 !important;
+  position: relative;
   width: 100%;
-  height: 83px;
-  background: #202020;
-  border-radius: 0px 0px 0px 0px;
-  opacity: 1;
-  .contentPage{
-    height: 100%;
-  }
-  .relevant {
-    // border-top: 1px solid #909090;
-    color: #909090;
-    height: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    &-1 {
-      float: left;
-      background-color: transparent;
-    }
-    &-2 {
-      float: right;
-      margin-left: 20px;
-    }
-    div {
-      margin-bottom: 8px;
+  bottom: 0;
+  z-index: 888;
+  .layout {
+    margin: 0 auto;
+    max-width: 1280px;
+    padding-left: 20px;
+    padding-right: 20px;
+    .relevant {
+      margin-top: 86px;
+      border-top: 1px solid #909090;
+      padding: 26px 0;
+      color: #909090;
+      &-1 {
+        // float: left;
+        background-color: transparent;
+      }
+      &-2 {
+        // float: right;
+      }
+      div {
+        margin-bottom: 8px;
 
-      a {
-        color: @primary-color;
-        font-size: 14px;
-        text-decoration: underline;
-        display: inline-block;
-        line-height: 25px;
+        a {
+          color: #15bec8;
+          font-size: 14px;
+          text-decoration: underline;
+          display: inline-block;
+          line-height: 25px;
 
-        &:nth-child(2) {
-          margin: 0 42px;
+          &:nth-child(2) {
+            margin: 0 42px;
+          }
         }
       }
+      a {
+        color: #909090;
+      }
+      p {
+        font-size: 14px;
+        color: #909090;
+        margin-bottom: 8px;
+      }
     }
-    a {
-      color: #909090;
+    &::after {
+      content: '';
+      display: block;
+      clear: both;
+    }
+  }
+}
+
+.infos {
+  font-size: 16px;
+  color: #ebebeb;
+  padding: 76px 0 0 0;
+  .infos-contact {
+    float: left;
+    ul {
+      margin-top: 27px;
+    }
+    li {
+      margin-bottom: 15px;
+    }
+  }
+  .infos-list {
+    float: left;
+    padding-top: 25px;
+  }
+  .infos-item {
+    float: left;
+    color: #909090;
+    min-width: 138px;
+    margin-right: 30px;
+    h6 {
+      margin-bottom: 27px;
+      color: #fff;
     }
-    p {
-      font-size: 14px;
+    a {
+      display: block;
       color: #909090;
-      margin-bottom: 8px;
+      margin-bottom: 15px;
+      cursor: pointer;
+      &:hover {
+        color: #ffffff;
+      }
     }
   }
 }
+.contacts-w {
+  display: flex;
+}
+.a_class,
+.a_class:hover,
+.a_class:active {
+  color: #fff;
+  text-decoration: none;
+  cursor: initial;
+  img {
+    display: inline-block;
+  }
+}
 </style>

src/components/popup/index.vue

@@ -0,0 +1,95 @@
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useConfigStore } from '@/stores/config'
+const props = defineProps({
+  href: String,
+  icon: String,
+  hovericon: String,
+  code: String,
+})
+const useConfig = useConfigStore();
+const isMobile = useConfig.isMobile
+const show = ref(false)
+function open  () {
+  show.value = true
+}
+function hide () {
+  show.value = false
+}
+function change () {
+  show.value = !show.value
+}
+</script>
+<template>
+  <div>
+    <a
+      :class="isMobile ? 'mobile' : 'pc'"
+      class="popup"
+      :href="href"
+      @mouseover="isMobile || open()"
+      @mouseout="isMobile || hide()"
+      @click="isMobile && change()"
+      target="_blank"
+    >
+      <img :src="icon" v-show="!hovericon || !show">
+      <img :src="hovericon" v-show="hovericon && show">
+      <div v-if="code" v-show="show">
+        <img :src="code">
+      </div>
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.popup {
+  display: inline-block;
+  width: 30px;
+  height: 30px;
+  margin-right: 12px;
+}
+
+.popup > img {
+  width: 100%;
+  height: 100%;
+}
+
+.popup.pc {
+  position: relative;
+}
+
+.popup.pc div {
+  width: 142px;
+  position: absolute;
+  left: 50%;
+  top: -12px;
+  transform: translateX(-50%) translateY(-100%);
+}
+
+.popup.pc div img {
+  width: 100%;
+  height: 100%;
+}
+
+.popup.mobile div {
+  position: fixed;
+  left: 0;
+  top: 66px;
+  padding-bottom: 66px;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  z-index: 99;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.popup.mobile div img {
+  width: 50%;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  margin-top: -66px;
+}
+
+</style>

src/i18n/zh.js

@@ -83,6 +83,59 @@ export default {
             ]
         },
     },
+    header: {
+        "core_product": "核心产品",
+        "solutions": "行业解决方案",
+        "solutionsText": "四维时代致力于人工智能三维数字化技术<br/>的研究和应用",
+        "kankan_space": "经典案例",
+        "core_tech": "核心技术",
+        "service": "服务支持",
+        "about": "关于我们",
+        "online_shop": "商城",
+        "foreign": "中德合作",
+        "solutionsHouse": "房产营销",
+        "solutionsExi": "智慧城市",
+        "solutionsSubject": "博物馆",
+        "solutionsShop": "VR购物",
+        "solutionsSec": "刑侦消防",
+        "serviceApp": "App 下载",
+        "joinUs": "加入我们",
+        "serviceUse": "使用教程",
+        "serviceBaoxiu": "售后服务",
+        "serviceVideo": "视频教程",
+        "aboutNews": "新闻中心",
+        "aboutAgent": "成为经销商",
+        "aboutCompany": "公司介绍",
+        "mallPro": "四维看看",
+        "kankanMinion": "四维看见",
+        "Mega": "四维深时",
+        "mallPeijian": "精选配件",
+        "tripod": "三脚架套装",
+        "USBdrive": "U盘",
+        "Battery": "电池",
+        "addService": "会员权益",
+        "corePruductItemPro": "四维看看",
+        "corePruductItemSxz": "四维 • 随心装",
+        "footer": {
+            "bannerTitle": "四维看看，让空间讲故事",
+            "find": "发现精彩",
+            "saleEmail": "销售合作",
+            "meitiEmail": "媒体采访",
+            "phone": "联系电话",
+            "find4D": "探索四维",
+            "kankan": "四维时代",
+            "zhongde": "中德人工智能研究院",
+            "moku": "四维模库",
+            "workTime": "周一至周五 9:00-18:30"
+        },
+        "moreName": {
+            "1": "装修家装",
+            "2": "商圈",
+            "3": "线上会展",
+            "4": "地下管网",
+            "5": "BIM"
+        }
+    },
     payInfo: {
         payErr: '支付异常',
         payfail: '支付失败',

src/main.ts

@@ -1,6 +1,6 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-
+import install from './components/install.ts'
 import App from './App.vue'
 import router from './router'
 import i18n from './i18n/index.js'
@@ -13,6 +13,7 @@ const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
+app.use(install)
 app.use(i18n)
 
 app.config.globalProperties.$cdn = 'https://4dscene.4dage.com/new4dkk/';

src/stores/config.ts

@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia';
+// defineStore 方法有两个参数，第一个参数是模块化名字（也就相当于身份证一样，不能重复）
+
+// 第二个参数是选项，对象里面有三个属性，相比于vuex 少了一个 mutations.
+export const useConfigStore = defineStore('config', {
+  state(){  // 存放的就是模块的变量
+    return {
+      isMobile: (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))?true:false,
+      isEur: window.location.hostname.includes('eur'),
+    }
+  },
+  getters:{ // 相当于vue里面的计算属性，可以缓存数据
+    getIsMobile(state){
+      return (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))?true:false
+    },
+  },
+  actions:{ // 可以通过actions 方法，改变 state 里面的值。
+    refreshModel(){
+      this.isMobile = (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))?true:false
+    }
+  }
+})

src/utils/api.js

@@ -6,7 +6,7 @@ let token = (localStorage && localStorage.getItem('token')) || 'eyJhbGciOiJIUzI1
 const baseUrl = import.meta.env.VITE_BASE_URL; //接口统一域名
 const instance = axios.create({
     baseURL: baseUrl,
-    timeout: 60 * 1000, //设置超时
+    // timeout: 60 * 1000, //设置超时
     headers: {
         "Content-Type": "application/json;charset=UTF-8;",
         "Accept-Language": "zh-CN,zh;q=0.9,en;q=0.8",