hai 1 ano · b2ba228b15
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -8,11 +8,15 @@
 
				     "lint": "vue-cli-service lint"
			
 
				   },
			
 
				   "dependencies": {
			
 
				+    "axios": "^1.4.0",
			
 
				     "core-js": "^3.8.3",
			
 
				+    "element-ui": "^2.15.13",
			
 
				     "postcss-pxtorem": "^6.0.0",
			
 
				+    "quill": "^1.3.7",
			
 
				     "swiper": "^9.4.1",
			
 
				     "vant": "^2.12.54",
			
 
				     "vue": "^2.6.14",
			
 
				+    "vue-quill-editor": "^3.0.6",
			
 
				     "vue-router": "^3.5.1",
			
 
				     "vuex": "^3.6.2"
			
 
				   },
			
--- a/public/index.html
+++ b/public/index.html
@@ -1,17 +1,23 @@
 
				 <!DOCTYPE html>
			
 
				 <html lang="">
			
 
				-  <head>
			
 
				-    <meta charset="utf-8">
			
 
				-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				-    <title><%= htmlWebpackPlugin.options.title %></title>
			
 
				-  </head>
			
 
				-  <body>
			
 
				-    <noscript>
			
 
				-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				-    </noscript>
			
 
				-    <div id="app"></div>
			
 
				-    <!-- built files will be auto injected -->
			
 
				-  </body>
			
 
				-</html>
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="utf-8">
			
 
				+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
			
 
				+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				+  <title>
			
 
				+    <%= htmlWebpackPlugin.options.title %>
			
 
				+  </title>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <noscript>
			
 
				+    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
			
 
				+        Please enable it to continue.</strong>
			
 
				+  </noscript>
			
 
				+  <div id="app"></div>
			
 
				+  <!-- built files will be auto injected -->
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/serves/axios.js
+++ b/serves/axios.js
@@ -0,0 +1,45 @@
 
				+import axios from "axios";
			
 
				+// import { gettoken } from "../services/token";
			
 
				+// axios.defaults.withCredentials=true;
			
 
				+const instance = axios.create({
			
 
				+  baseURL: 'http://192.168.2.164:8899', //请求的基础地址
			
 
				+  timeout: 5000, //请求超时的时间
			
 
				+});
			
 
				+//发一个get请求
			
 
				+
			
 
				+export const get = (url, params) => instance.get(url, { params });
			
 
				+//发一个post请求
			
 
				+export const post = (url, data) => instance.post(url, data);
			
 
				+export const put = (url, params) => instance.put(url, params);
			
 
				+
			
 
				+export default instance;
			
 
				+// Add a request interceptor
			
 
				+//全局请求拦截，发起网络请求之前执行
			
 
				+instance.interceptors.request.use(
			
 
				+
			
 
				+  function (config) {
			
 
				+    // Do something before request is sent
			
 
				+    // config.headers.Authorization = gettoken();
			
 
				+    return config;
			
 
				+  },
			
 
				+  function (error) {
			
 
				+    // Do something with request error
			
 
				+    return Promise.reject(error);
			
 
				+  }
			
 
				+
			
 
				+);
			
 
				+
			
 
				+// Add a response interceptor
			
 
				+//全局响应拦截，网络请求返回之后执行
			
 
				+instance.interceptors.response.use(
			
 
				+  function (response) {
			
 
				+    // Any status code that lie within the range of 2xx cause this function to trigger
			
 
				+    // Do something with response data
			
 
				+    return response.data;
			
 
				+  },
			
 
				+  function (error) {
			
 
				+    // Any status codes that falls outside the range of 2xx cause this function to trigger
			
 
				+    // Do something with response error
			
 
				+    return Promise.reject(error);
			
 
				+  }
			
 
				+);
			
--- a/serves/prove.js
+++ b/serves/prove.js
@@ -0,0 +1,13 @@
 
				+import { get, } from './axios'
			
 
				+
			
 
				+//轮播图和文章分类
			
 
				+export const indexswiperInfo = (data) => get('/api/content/home/', data)
			
 
				+//查看文章列表
			
 
				+export const indexcategoryInfo = (data) => get('/api/content/csutomer_article/?category=' + data)
			
 
				+//文章详情
			
 
				+// export const textdetailInfo = (id, data) => get('/api/content/csutomer_article/' + id + '/?' + data)
			
 
				+export const textdetailInfo = (id, userid, type, unionid) => get(`/api/content/csutomer_article/${id}/?userid=${userid}&type=${type}&unionid=${unionid}`)
			
 
				+//点赞接口
			
 
				+export const clkgoodInfo = (id, userid) => get(`/api/content/csutomer_article/${id}/like/?userid=${userid}`)
			
 
				+//转发列表
			
 
				+export const forwardInfo = (userid, category) => get(`/api/content/share/?userid=${userid}&category=${category}`)
			
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,39 @@
 
				 <template>
			
 
				   <div id="app">
			
 
				-    <router-view />
			
 
				+    <router-view class="main" />
			
 
				+    <Tabbar v-show="isshowNav" route v-model="active">
			
 
				+      <TabbarItem :to="{ name: 'index' }" icon="home-o">首页</TabbarItem>
			
 
				+
			
 
				+      <TabbarItem :to="{ name: 'myindex' }" icon="friends-o">我的</TabbarItem>
			
 
				+
			
 
				+    </Tabbar>
			
 
				   </div>
			
 
				 </template>
			
 
				+<script>
			
 
				+import { Tabbar, TabbarItem } from 'vant';
			
 
				+export default {
			
 
				+  data () {
			
 
				+    return {
			
 
				+      active: 0,
			
 
				+    }
			
 
				+  },
			
 
				+  computed: {
			
 
				+    isshowNav () {
			
 
				+      return this.$route.meta.hideNav
			
 
				+    }
			
 
				+  },
			
 
				+  components: {
			
 
				+    Tabbar, TabbarItem
			
 
				+  },
			
 
				 
			
 
				+  methods: {
			
 
				+
			
 
				+  },
			
 
				+}
			
 
				+</script>
			
 
				 <style lang="scss">
			
 
				+// @import url(@/assets/icon/iconfont.css;);
			
 
				+
			
 
				 * {
			
 
				   margin: 0;
			
 
				   padding: 0;
			
@@ -13,14 +42,38 @@
 
				 html {
			
 
				   width: 100vw;
			
 
				   height: 100vh;
			
 
				-  font-size: 16px; // 相当于1rem = 10px
			
 
				+  // font-size: 10px; // 相当于1rem = 10px
			
 
				   position: relative;
			
 
				 }
			
 
				 
			
 
				 body {
			
 
				   width: 100vw;
			
 
				   height: 100vh;
			
 
				-  font-size: 16px;
			
 
				+  // font-size: 10px;
			
 
				   position: relative;
			
 
				 }
			
 
				+
			
 
				+#app {
			
 
				+  display: flex;
			
 
				+  width: 100vw;
			
 
				+  flex-direction: column;
			
 
				+}
			
 
				+
			
 
				+#app .main {
			
 
				+  flex: 1;
			
 
				+  overflow: auto;
			
 
				+  padding-bottom: 7vh;
			
 
				+}
			
 
				+
			
 
				+.van-tabbar {
			
 
				+  height: 7vh !important;
			
 
				+}
			
 
				+
			
 
				+.van-tabbar-item .van-icon {
			
 
				+  font-size: 1rem;
			
 
				+}
			
 
				+
			
 
				+.van-tabbar-item .van-toast__text {
			
 
				+  font-size: 18px;
			
 
				+}
			
 
				 </style>
			
--- a/src/assets/icon/demo.css
+++ b/src/assets/icon/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;
			
 
				+}
			
--- a/src/assets/icon/demo_index.html
+++ b/src/assets/icon/demo_index.html
@@ -0,0 +1,230 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8"/>
			
 
				+  <title>iconfont Demo</title>
			
 
				+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
			
 
				+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
			
 
				+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
			
 
				+  <link rel="stylesheet" href="demo.css">
			
 
				+  <link rel="stylesheet" href="iconfont.css">
			
 
				+  <script src="iconfont.js"></script>
			
 
				+  <!-- jQuery -->
			
 
				+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
			
 
				+  <!-- 代码高亮 -->
			
 
				+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
			
 
				+  <style>
			
 
				+    .main .logo {
			
 
				+      margin-top: 0;
			
 
				+      height: auto;
			
 
				+    }
			
 
				+
			
 
				+    .main .logo a {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .main .logo .sub-title {
			
 
				+      margin-left: 0.5em;
			
 
				+      font-size: 22px;
			
 
				+      color: #fff;
			
 
				+      background: linear-gradient(-45deg, #3967FF, #B500FE);
			
 
				+      -webkit-background-clip: text;
			
 
				+      -webkit-text-fill-color: transparent;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div class="main">
			
 
				+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
			
 
				+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
			
 
				+      
			
 
				+    </a></h1>
			
 
				+    <div class="nav-tabs">
			
 
				+      <ul id="tabs" class="dib-box">
			
 
				+        <li class="dib active"><span>Unicode</span></li>
			
 
				+        <li class="dib"><span>Font class</span></li>
			
 
				+        <li class="dib"><span>Symbol</span></li>
			
 
				+      </ul>
			
 
				+      
			
 
				+    </div>
			
 
				+    <div class="tab-container">
			
 
				+      <div class="content unicode" style="display: block;">
			
 
				+          <ul class="icon_lists dib-box">
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+              <span class="icon iconfont">&#xe660;</span>
			
 
				+                <div class="name">微信</div>
			
 
				+                <div class="code-name">&amp;#xe660;</div>
			
 
				+              </li>
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+              <span class="icon iconfont">&#xe8bd;</span>
			
 
				+                <div class="name">209电话</div>
			
 
				+                <div class="code-name">&amp;#xe8bd;</div>
			
 
				+              </li>
			
 
				+          
			
 
				+          </ul>
			
 
				+          <div class="article markdown">
			
 
				+          <h2 id="unicode-">Unicode 引用</h2>
			
 
				+          <hr>
			
 
				+
			
 
				+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
			
 
				+          <ul>
			
 
				+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
			
 
				+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
			
 
				+          </ul>
			
 
				+          <blockquote>
			
 
				+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
			
 
				+          </blockquote>
			
 
				+          <p>Unicode 使用步骤如下：</p>
			
 
				+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
			
 
				+<pre><code class="language-css"
			
 
				+>@font-face {
			
 
				+  font-family: 'iconfont';
			
 
				+  src: url('iconfont.ttf?t=1689129024667') format('truetype');
			
 
				+}
			
 
				+</code></pre>
			
 
				+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
			
 
				+<pre><code class="language-css"
			
 
				+>.iconfont {
			
 
				+  font-family: "iconfont" !important;
			
 
				+  font-size: 16px;
			
 
				+  font-style: normal;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+}
			
 
				+</code></pre>
			
 
				+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
			
 
				+<pre>
			
 
				+<code class="language-html"
			
 
				+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
			
 
				+</code></pre>
			
 
				+          <blockquote>
			
 
				+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
			
 
				+          </blockquote>
			
 
				+          </div>
			
 
				+      </div>
			
 
				+      <div class="content font-class">
			
 
				+        <ul class="icon_lists dib-box">
			
 
				+          
			
 
				+          <li class="dib">
			
 
				+            <span class="icon iconfont icon-weixin"></span>
			
 
				+            <div class="name">
			
 
				+              微信
			
 
				+            </div>
			
 
				+            <div class="code-name">.icon-weixin
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          
			
 
				+          <li class="dib">
			
 
				+            <span class="icon iconfont icon-dianhua"></span>
			
 
				+            <div class="name">
			
 
				+              209电话
			
 
				+            </div>
			
 
				+            <div class="code-name">.icon-dianhua
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          
			
 
				+        </ul>
			
 
				+        <div class="article markdown">
			
 
				+        <h2 id="font-class-">font-class 引用</h2>
			
 
				+        <hr>
			
 
				+
			
 
				+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
			
 
				+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
			
 
				+        <ul>
			
 
				+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
			
 
				+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
			
 
				+        </ul>
			
 
				+        <p>使用步骤如下：</p>
			
 
				+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
			
 
				+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
			
 
				+</code></pre>
			
 
				+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
			
 
				+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
			
 
				+</code></pre>
			
 
				+        <blockquote>
			
 
				+          <p>"
			
 
				+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
			
 
				+        </blockquote>
			
 
				+      </div>
			
 
				+      </div>
			
 
				+      <div class="content symbol">
			
 
				+          <ul class="icon_lists dib-box">
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+                <svg class="icon svg-icon" aria-hidden="true">
			
 
				+                  <use xlink:href="#icon-weixin"></use>
			
 
				+                </svg>
			
 
				+                <div class="name">微信</div>
			
 
				+                <div class="code-name">#icon-weixin</div>
			
 
				+            </li>
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+                <svg class="icon svg-icon" aria-hidden="true">
			
 
				+                  <use xlink:href="#icon-dianhua"></use>
			
 
				+                </svg>
			
 
				+                <div class="name">209电话</div>
			
 
				+                <div class="code-name">#icon-dianhua</div>
			
 
				+            </li>
			
 
				+          
			
 
				+          </ul>
			
 
				+          <div class="article markdown">
			
 
				+          <h2 id="symbol-">Symbol 引用</h2>
			
 
				+          <hr>
			
 
				+
			
 
				+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
			
 
				+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
			
 
				+          <ul>
			
 
				+            <li>支持多色图标了，不再受单色限制。</li>
			
 
				+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
			
 
				+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
			
 
				+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
			
 
				+          </ul>
			
 
				+          <p>使用步骤如下：</p>
			
 
				+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
			
 
				+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
			
 
				+</code></pre>
			
 
				+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
			
 
				+<pre><code class="language-html">&lt;style&gt;
			
 
				+.icon {
			
 
				+  width: 1em;
			
 
				+  height: 1em;
			
 
				+  vertical-align: -0.15em;
			
 
				+  fill: currentColor;
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+&lt;/style&gt;
			
 
				+</code></pre>
			
 
				+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
			
 
				+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
			
 
				+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
			
 
				+&lt;/svg&gt;
			
 
				+</code></pre>
			
 
				+          </div>
			
 
				+      </div>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <script>
			
 
				+  $(document).ready(function () {
			
 
				+      $('.tab-container .content:first').show()
			
 
				+
			
 
				+      $('#tabs li').click(function (e) {
			
 
				+        var tabContent = $('.tab-container .content')
			
 
				+        var index = $(this).index()
			
 
				+
			
 
				+        if ($(this).hasClass('active')) {
			
 
				+          return
			
 
				+        } else {
			
 
				+          $('#tabs li').removeClass('active')
			
 
				+          $(this).addClass('active')
			
 
				+
			
 
				+          tabContent.hide().eq(index).fadeIn()
			
 
				+        }
			
 
				+      })
			
 
				+    })
			
 
				+  </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/src/assets/icon/iconfont.css
+++ b/src/assets/icon/iconfont.css
@@ -0,0 +1,21 @@
 
				+@font-face {
			
 
				+  font-family: "iconfont"; /* Project id  */
			
 
				+  src: url('iconfont.ttf?t=1689129024667') format('truetype');
			
 
				+}
			
 
				+
			
 
				+.iconfont {
			
 
				+  font-family: "iconfont" !important;
			
 
				+  font-size: 16px;
			
 
				+  font-style: normal;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+}
			
 
				+
			
 
				+.icon-weixin:before {
			
 
				+  content: "\e660";
			
 
				+}
			
 
				+
			
 
				+.icon-dianhua:before {
			
 
				+  content: "\e8bd";
			
 
				+}
			
 
				+
			
--- a/src/assets/icon/iconfont.js
+++ b/src/assets/icon/iconfont.js
--- a/src/assets/icon/iconfont.json
+++ b/src/assets/icon/iconfont.json
@@ -0,0 +1,23 @@
 
				+{
			
 
				+  "id": "",
			
 
				+  "name": "",
			
 
				+  "font_family": "iconfont",
			
 
				+  "css_prefix_text": "icon-",
			
 
				+  "description": "",
			
 
				+  "glyphs": [
			
 
				+    {
			
 
				+      "icon_id": "840781",
			
 
				+      "name": "微信",
			
 
				+      "font_class": "weixin",
			
 
				+      "unicode": "e660",
			
 
				+      "unicode_decimal": 58976
			
 
				+    },
			
 
				+    {
			
 
				+      "icon_id": "1727432",
			
 
				+      "name": "209电话",
			
 
				+      "font_class": "dianhua",
			
 
				+      "unicode": "e8bd",
			
 
				+      "unicode_decimal": 59581
			
 
				+    }
			
 
				+  ]
			
 
				+}
			
--- a/src/assets/icon/iconfont.ttf
+++ b/src/assets/icon/iconfont.ttf
--- a/src/assets/iconfont/demo.css
+++ b/src/assets/iconfont/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;
			
 
				+}
			
--- a/src/assets/iconfont/demo_index.html
+++ b/src/assets/iconfont/demo_index.html
@@ -0,0 +1,280 @@
 
				+<!DOCTYPE html>
			
 
				+<html>
			
 
				+<head>
			
 
				+  <meta charset="utf-8"/>
			
 
				+  <title>iconfont Demo</title>
			
 
				+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
			
 
				+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
			
 
				+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
			
 
				+  <link rel="stylesheet" href="demo.css">
			
 
				+  <link rel="stylesheet" href="iconfont.css">
			
 
				+  <script src="iconfont.js"></script>
			
 
				+  <!-- jQuery -->
			
 
				+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
			
 
				+  <!-- 代码高亮 -->
			
 
				+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
			
 
				+  <style>
			
 
				+    .main .logo {
			
 
				+      margin-top: 0;
			
 
				+      height: auto;
			
 
				+    }
			
 
				+
			
 
				+    .main .logo a {
			
 
				+      display: flex;
			
 
				+      align-items: center;
			
 
				+    }
			
 
				+
			
 
				+    .main .logo .sub-title {
			
 
				+      margin-left: 0.5em;
			
 
				+      font-size: 22px;
			
 
				+      color: #fff;
			
 
				+      background: linear-gradient(-45deg, #3967FF, #B500FE);
			
 
				+      -webkit-background-clip: text;
			
 
				+      -webkit-text-fill-color: transparent;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <div class="main">
			
 
				+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
			
 
				+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
			
 
				+      
			
 
				+    </a></h1>
			
 
				+    <div class="nav-tabs">
			
 
				+      <ul id="tabs" class="dib-box">
			
 
				+        <li class="dib active"><span>Unicode</span></li>
			
 
				+        <li class="dib"><span>Font class</span></li>
			
 
				+        <li class="dib"><span>Symbol</span></li>
			
 
				+      </ul>
			
 
				+      
			
 
				+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4126810" target="_blank" class="nav-more">查看项目</a>
			
 
				+      
			
 
				+    </div>
			
 
				+    <div class="tab-container">
			
 
				+      <div class="content unicode" style="display: block;">
			
 
				+          <ul class="icon_lists dib-box">
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+              <span class="icon iconfont">&#xe626;</span>
			
 
				+                <div class="name">消息</div>
			
 
				+                <div class="code-name">&amp;#xe626;</div>
			
 
				+              </li>
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+              <span class="icon iconfont">&#xe8bd;</span>
			
 
				+                <div class="name">209电话</div>
			
 
				+                <div class="code-name">&amp;#xe8bd;</div>
			
 
				+              </li>
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+              <span class="icon iconfont">&#xe65e;</span>
			
 
				+                <div class="name">信息</div>
			
 
				+                <div class="code-name">&amp;#xe65e;</div>
			
 
				+              </li>
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+              <span class="icon iconfont">&#xeb2a;</span>
			
 
				+                <div class="name">24gf-user2</div>
			
 
				+                <div class="code-name">&amp;#xeb2a;</div>
			
 
				+              </li>
			
 
				+          
			
 
				+          </ul>
			
 
				+          <div class="article markdown">
			
 
				+          <h2 id="unicode-">Unicode 引用</h2>
			
 
				+          <hr>
			
 
				+
			
 
				+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
			
 
				+          <ul>
			
 
				+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
			
 
				+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
			
 
				+          </ul>
			
 
				+          <blockquote>
			
 
				+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
			
 
				+          </blockquote>
			
 
				+          <p>Unicode 使用步骤如下：</p>
			
 
				+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
			
 
				+<pre><code class="language-css"
			
 
				+>@font-face {
			
 
				+  font-family: 'iconfont';
			
 
				+  src: url('iconfont.woff2?t=1686968377940') format('woff2'),
			
 
				+       url('iconfont.woff?t=1686968377940') format('woff'),
			
 
				+       url('iconfont.ttf?t=1686968377940') format('truetype');
			
 
				+}
			
 
				+</code></pre>
			
 
				+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
			
 
				+<pre><code class="language-css"
			
 
				+>.iconfont {
			
 
				+  font-family: "iconfont" !important;
			
 
				+  font-size: 16px;
			
 
				+  font-style: normal;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+}
			
 
				+</code></pre>
			
 
				+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
			
 
				+<pre>
			
 
				+<code class="language-html"
			
 
				+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
			
 
				+</code></pre>
			
 
				+          <blockquote>
			
 
				+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
			
 
				+          </blockquote>
			
 
				+          </div>
			
 
				+      </div>
			
 
				+      <div class="content font-class">
			
 
				+        <ul class="icon_lists dib-box">
			
 
				+          
			
 
				+          <li class="dib">
			
 
				+            <span class="icon iconfont icon-xiaoxi"></span>
			
 
				+            <div class="name">
			
 
				+              消息
			
 
				+            </div>
			
 
				+            <div class="code-name">.icon-xiaoxi
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          
			
 
				+          <li class="dib">
			
 
				+            <span class="icon iconfont icon-dianhua"></span>
			
 
				+            <div class="name">
			
 
				+              209电话
			
 
				+            </div>
			
 
				+            <div class="code-name">.icon-dianhua
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          
			
 
				+          <li class="dib">
			
 
				+            <span class="icon iconfont icon-xinxi"></span>
			
 
				+            <div class="name">
			
 
				+              信息
			
 
				+            </div>
			
 
				+            <div class="code-name">.icon-xinxi
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          
			
 
				+          <li class="dib">
			
 
				+            <span class="icon iconfont icon-24gf-user2"></span>
			
 
				+            <div class="name">
			
 
				+              24gf-user2
			
 
				+            </div>
			
 
				+            <div class="code-name">.icon-24gf-user2
			
 
				+            </div>
			
 
				+          </li>
			
 
				+          
			
 
				+        </ul>
			
 
				+        <div class="article markdown">
			
 
				+        <h2 id="font-class-">font-class 引用</h2>
			
 
				+        <hr>
			
 
				+
			
 
				+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
			
 
				+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
			
 
				+        <ul>
			
 
				+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
			
 
				+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
			
 
				+        </ul>
			
 
				+        <p>使用步骤如下：</p>
			
 
				+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
			
 
				+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
			
 
				+</code></pre>
			
 
				+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
			
 
				+<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
			
 
				+</code></pre>
			
 
				+        <blockquote>
			
 
				+          <p>"
			
 
				+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
			
 
				+        </blockquote>
			
 
				+      </div>
			
 
				+      </div>
			
 
				+      <div class="content symbol">
			
 
				+          <ul class="icon_lists dib-box">
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+                <svg class="icon svg-icon" aria-hidden="true">
			
 
				+                  <use xlink:href="#icon-xiaoxi"></use>
			
 
				+                </svg>
			
 
				+                <div class="name">消息</div>
			
 
				+                <div class="code-name">#icon-xiaoxi</div>
			
 
				+            </li>
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+                <svg class="icon svg-icon" aria-hidden="true">
			
 
				+                  <use xlink:href="#icon-dianhua"></use>
			
 
				+                </svg>
			
 
				+                <div class="name">209电话</div>
			
 
				+                <div class="code-name">#icon-dianhua</div>
			
 
				+            </li>
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+                <svg class="icon svg-icon" aria-hidden="true">
			
 
				+                  <use xlink:href="#icon-xinxi"></use>
			
 
				+                </svg>
			
 
				+                <div class="name">信息</div>
			
 
				+                <div class="code-name">#icon-xinxi</div>
			
 
				+            </li>
			
 
				+          
			
 
				+            <li class="dib">
			
 
				+                <svg class="icon svg-icon" aria-hidden="true">
			
 
				+                  <use xlink:href="#icon-24gf-user2"></use>
			
 
				+                </svg>
			
 
				+                <div class="name">24gf-user2</div>
			
 
				+                <div class="code-name">#icon-24gf-user2</div>
			
 
				+            </li>
			
 
				+          
			
 
				+          </ul>
			
 
				+          <div class="article markdown">
			
 
				+          <h2 id="symbol-">Symbol 引用</h2>
			
 
				+          <hr>
			
 
				+
			
 
				+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
			
 
				+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
			
 
				+          <ul>
			
 
				+            <li>支持多色图标了，不再受单色限制。</li>
			
 
				+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
			
 
				+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
			
 
				+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
			
 
				+          </ul>
			
 
				+          <p>使用步骤如下：</p>
			
 
				+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
			
 
				+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
			
 
				+</code></pre>
			
 
				+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
			
 
				+<pre><code class="language-html">&lt;style&gt;
			
 
				+.icon {
			
 
				+  width: 1em;
			
 
				+  height: 1em;
			
 
				+  vertical-align: -0.15em;
			
 
				+  fill: currentColor;
			
 
				+  overflow: hidden;
			
 
				+}
			
 
				+&lt;/style&gt;
			
 
				+</code></pre>
			
 
				+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
			
 
				+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
			
 
				+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
			
 
				+&lt;/svg&gt;
			
 
				+</code></pre>
			
 
				+          </div>
			
 
				+      </div>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+  <script>
			
 
				+  $(document).ready(function () {
			
 
				+      $('.tab-container .content:first').show()
			
 
				+
			
 
				+      $('#tabs li').click(function (e) {
			
 
				+        var tabContent = $('.tab-container .content')
			
 
				+        var index = $(this).index()
			
 
				+
			
 
				+        if ($(this).hasClass('active')) {
			
 
				+          return
			
 
				+        } else {
			
 
				+          $('#tabs li').removeClass('active')
			
 
				+          $(this).addClass('active')
			
 
				+
			
 
				+          tabContent.hide().eq(index).fadeIn()
			
 
				+        }
			
 
				+      })
			
 
				+    })
			
 
				+  </script>
			
 
				+</body>
			
 
				+</html>
			
--- a/src/assets/iconfont/iconfont.css
+++ b/src/assets/iconfont/iconfont.css
@@ -0,0 +1,31 @@
 
				+@font-face {
			
 
				+  font-family: "iconfont"; /* Project id 4126810 */
			
 
				+  src: url('iconfont.woff2?t=1686968377940') format('woff2'),
			
 
				+       url('iconfont.woff?t=1686968377940') format('woff'),
			
 
				+       url('iconfont.ttf?t=1686968377940') format('truetype');
			
 
				+}
			
 
				+
			
 
				+.iconfont {
			
 
				+  font-family: "iconfont" !important;
			
 
				+  font-size: 16px;
			
 
				+  font-style: normal;
			
 
				+  -webkit-font-smoothing: antialiased;
			
 
				+  -moz-osx-font-smoothing: grayscale;
			
 
				+}
			
 
				+
			
 
				+.icon-xiaoxi:before {
			
 
				+  content: "\e626";
			
 
				+}
			
 
				+
			
 
				+.icon-dianhua:before {
			
 
				+  content: "\e8bd";
			
 
				+}
			
 
				+
			
 
				+.icon-xinxi:before {
			
 
				+  content: "\e65e";
			
 
				+}
			
 
				+
			
 
				+.icon-24gf-user2:before {
			
 
				+  content: "\eb2a";
			
 
				+}
			
 
				+
			
--- a/src/assets/iconfont/iconfont.js
+++ b/src/assets/iconfont/iconfont.js
--- a/src/assets/iconfont/iconfont.json
+++ b/src/assets/iconfont/iconfont.json
@@ -0,0 +1,37 @@
 
				+{
			
 
				+  "id": "4126810",
			
 
				+  "name": "qywx_1",
			
 
				+  "font_family": "iconfont",
			
 
				+  "css_prefix_text": "icon-",
			
 
				+  "description": "",
			
 
				+  "glyphs": [
			
 
				+    {
			
 
				+      "icon_id": "7588132",
			
 
				+      "name": "消息",
			
 
				+      "font_class": "xiaoxi",
			
 
				+      "unicode": "e626",
			
 
				+      "unicode_decimal": 58918
			
 
				+    },
			
 
				+    {
			
 
				+      "icon_id": "1727432",
			
 
				+      "name": "209电话",
			
 
				+      "font_class": "dianhua",
			
 
				+      "unicode": "e8bd",
			
 
				+      "unicode_decimal": 59581
			
 
				+    },
			
 
				+    {
			
 
				+      "icon_id": "6536724",
			
 
				+      "name": "信息",
			
 
				+      "font_class": "xinxi",
			
 
				+      "unicode": "e65e",
			
 
				+      "unicode_decimal": 58974
			
 
				+    },
			
 
				+    {
			
 
				+      "icon_id": "7596852",
			
 
				+      "name": "24gf-user2",
			
 
				+      "font_class": "24gf-user2",
			
 
				+      "unicode": "eb2a",
			
 
				+      "unicode_decimal": 60202
			
 
				+    }
			
 
				+  ]
			
 
				+}
			
--- a/src/assets/iconfont/iconfont.ttf
+++ b/src/assets/iconfont/iconfont.ttf
--- a/src/assets/iconfont/iconfont.woff
+++ b/src/assets/iconfont/iconfont.woff
--- a/src/assets/iconfont/iconfont.woff2
+++ b/src/assets/iconfont/iconfont.woff2
--- a/src/main.js
+++ b/src/main.js
@@ -4,10 +4,14 @@ import router from './router'
 
				 import store from './store'
			
 
				 import '@/util/rem.js'
			
 
				 import 'vant/lib/index.css'; // 引入 Vant 样式
			
 
				-
			
 
				+import './assets/icon/iconfont.css'
			
 
				+// zhangjunyi
			
 
				+import ElementUI from 'element-ui';
			
 
				+import 'element-ui/lib/theme-chalk/index.css';
			
 
				+import '@/assets/iconfont/iconfont.css';
			
 
				 
			
 
				 Vue.config.productionTip = false
			
 
				-
			
 
				+Vue.use(ElementUI);
			
 
				 new Vue({
			
 
				   router,
			
 
				   store,
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,7 @@
 
				 import Vue from 'vue'
			
 
				 import VueRouter from 'vue-router'
			
 
				 
			
 
				+
			
 
				 Vue.use(VueRouter)
			
 
				 
			
 
				 const routes = [
			
@@ -13,14 +14,39 @@ const routes = [
 
				   {
			
 
				     path: '/index',
			
 
				     name: 'index',
			
 
				-    component: () => import('../views/userindex/indexpage/UserIndex.vue')
			
 
				+    component: () => import('../views/userindex/indexpage/UserIndex.vue'),
			
 
				+    meta: {
			
 
				+      hideNav: true
			
 
				+    }
			
 
				+  },
			
 
				+  // 文章页
			
 
				+  {
			
 
				+    path: '/textpage',
			
 
				+    name: 'textpage',
			
 
				+    component: () => import('../views/userindex/indexpage/ArticleIndex.vue'),
			
 
				+
			
 
				+  },
			
 
				+  // 我的
			
 
				+  {
			
 
				+    path: '/myindex',
			
 
				+    name: 'myindex',
			
 
				+    component: () => import('../views/userindex/my/MyIndex.vue'),
			
 
				+    meta: {
			
 
				+      hideNav: true
			
 
				+    }
			
 
				+  },
			
 
				+  // 我的转发
			
 
				+  {
			
 
				+    path: '/myforward',
			
 
				+    name: 'myforward',
			
 
				+    component: () => import('../views/userindex/my/MyForward.vue')
			
 
				+  },
			
 
				+  // 我的转发详情
			
 
				+  {
			
 
				+    path: '/myforwarddetail',
			
 
				+    name: 'myforwarddetail',
			
 
				+    component: () => import('../views/userindex/my/MyForwarddetail.vue')
			
 
				   },
			
 
				-  //文章页
			
 
				-  // {
			
 
				-  //   path: '/textpage',
			
 
				-  //   name: 'textpage',
			
 
				-  //   component: () => import('../views/userindex/indexpage/Textpage.vue')
			
 
				-  // },
			
 
				 ]
			
 
				 const router = new VueRouter({
			
 
				   mode: 'history',
			
--- a/src/views/Fuzeren/FuzerenView.vue
+++ b/src/views/Fuzeren/FuzerenView.vue
@@ -1,74 +1,1199 @@
 
				 <template>
			
 
				   <div id="FuzeRen">
			
 
				     <!-- 背景渐变 -->
			
 
				-    <div class="top-color"></div>
			
 
				+    <div class="top-color">
			
 
				+      <div class="top-fuzeren">
			
 
				+        <span class="top-fuzeren-fs">负责人 | 贾伟旗</span>
			
 
				+      </div>
			
 
				+    </div>
			
 
				 
			
 
				     <!-- 个人信息模块 -->
			
 
				     <div class="PersonalInformation">
			
 
				       <!-- 内块 -->
			
 
				       <div class="PI-bodyInnerblock">
			
 
				-        <!-- 用户名 -->
			
 
				-        <div class="wx_password">
			
 
				-          <p>{{ wx_password }}</p>
			
 
				+        <!-- 弹性盒布局 -->
			
 
				+        <div class="PI-Bflex">
			
 
				+          <div class="PI-Bleft">
			
 
				+            <div class="OneCeng">
			
 
				+              <!-- 用户名 -->
			
 
				+              <div class="wx_password">
			
 
				+                <span>{{ wx_password }}</span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!-- 关键词 -->
			
 
				+            <div class="KeyWordss">
			
 
				+              <!-- first -->
			
 
				+              <div class="First-kw">
			
 
				+                <span>微信</span>
			
 
				+              </div>
			
 
				+              <!-- second -->
			
 
				+              <div class="Second-kw">
			
 
				+                <span>我负责的</span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+          <!-- icon -->
			
 
				+          <div class="PI-Bright">
			
 
				+            <div class="PSicon">
			
 
				+              <span class="iconfont icon-24gf-user2"></span>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <!-- 联系信息 -->
			
 
				+        <div class="ContactDetails">
			
 
				+          <span class="iconfont icon-xinxi span1"></span>
			
 
				+          <span class="span2">{{ xinxipass }}</span>
			
 
				+        </div>
			
 
				+        <!-- 电话单聊 -->
			
 
				+        <div class="TelephoneChat">
			
 
				+          <div class="Telephone">
			
 
				+            <span class="iconfont icon-dianhua span1"></span>
			
 
				+            <span class="Tp-text">电话</span>
			
 
				+          </div>
			
 
				+          <span>|</span>
			
 
				+          <div class="Chat">
			
 
				+            <span class="iconfont icon-xiaoxi span2"></span>
			
 
				+            <span class="Ch-text">电话</span>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 标签模块 -->
			
 
				+    <div class="TagsModule">
			
 
				+      <!-- 内块 -->
			
 
				+      <div class="TagsModuleInnerblock">
			
 
				+        <!-- 标题 -->
			
 
				+        <p class="TagsModule-p">标签</p>
			
 
				+        <!-- 标签 -->
			
 
				+        <div class="label">
			
 
				+          <!-- first -->
			
 
				+          <div class="First-label">
			
 
				+            <span>M指标</span>
			
 
				+          </div>
			
 
				         </div>
			
 
				       </div>
			
 
				     </div>
			
 
				+
			
 
				+    <!-- 关系分析模块 -->
			
 
				+    <div class="RelationshipAnalysis">
			
 
				+      <!-- 内块 -->
			
 
				+      <div class="RA-body">
			
 
				+        <!-- 关系 -->
			
 
				+        <div class="RA-body-guanxi">
			
 
				+          <div class="RBG-tit">
			
 
				+            <span class="GX-tit">关系</span>
			
 
				+          </div>
			
 
				+          <div class="RBG-bd">
			
 
				+            <span class="GX-bd">1个 企业好友</span>
			
 
				+            <span class="GX-bd-fgx">|</span>
			
 
				+            <span class="GX-bd">0个 群聊</span>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <!-- 分析 -->
			
 
				+        <div class="RA-body-fenxi">
			
 
				+          <div class="RBF-tit">
			
 
				+            <span class="FX-tit">分析</span>
			
 
				+          </div>
			
 
				+          <div class="RBF-bd">
			
 
				+            <span class="FX-bd">低意向客户</span>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+
			
 
				+    <!-- 标签栏模块 -->
			
 
				+    <div class="LabelBarModule">
			
 
				+      <tabs v-model="active" class="vanttabs">
			
 
				+        <tab title="详情">
			
 
				+          <div class="TabsXiangqing">
			
 
				+            <!-- 基础信息 -->
			
 
				+            <div class="BasicInformation">
			
 
				+              <!-- 标题 -->
			
 
				+              <div class="BI-title">
			
 
				+                <span>基础信息</span>
			
 
				+              </div>
			
 
				+              <!-- 基础信息内容 -->
			
 
				+              <div class="BI-body">
			
 
				+                <!-- 顶层 -->
			
 
				+                <div class="BI-body-top">
			
 
				+                  <div class="BI-flex">
			
 
				+                    <span class="span1">昵称</span>
			
 
				+                    <span class="span2">淡忘</span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <div class="BI-body-bottom">
			
 
				+                  <div class="BI-flex">
			
 
				+                    <span class="span1">客户来源</span>
			
 
				+                    <span class="span2">微信</span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!-- 联系方式 -->
			
 
				+            <div class="ContactInformation">
			
 
				+              <!-- 标题 -->
			
 
				+              <div class="CI-title">
			
 
				+                <span>联系方式</span>
			
 
				+              </div>
			
 
				+              <!-- 联系方式内容 -->
			
 
				+              <div class="CI-body">
			
 
				+                <!-- first -->
			
 
				+                <div class="CI-body-first">
			
 
				+                  <div class="CI-flex">
			
 
				+                    <span class="span1">手机号</span>
			
 
				+                    <span class="span2">18538149448 | 18538149448</span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <!-- second -->
			
 
				+                <div class="CI-body-second">
			
 
				+                  <div class="CI-flex">
			
 
				+                    <span class="span1">邮箱</span>
			
 
				+                    <span class="span2">-</span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <!-- third -->
			
 
				+                <div class="CI-body-third">
			
 
				+                  <div class="CI-flex">
			
 
				+                    <span class="span1">地区</span>
			
 
				+                    <span class="span2">-</span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <!-- fouth -->
			
 
				+                <div class="CI-body-fouth">
			
 
				+                  <div class="CI-flex">
			
 
				+                    <span class="span1">详细地址</span>
			
 
				+                    <span class="span2">-</span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <!-- 身份信息 -->
			
 
				+            <div class="IdentityInformation">
			
 
				+              <!-- 标题 -->
			
 
				+              <div class="II-title">
			
 
				+                <span>身份信息</span>
			
 
				+              </div>
			
 
				+              <!-- 基础信息内容 -->
			
 
				+              <div class="II-body">
			
 
				+                <!-- 顶层 -->
			
 
				+                <div class="II-body-top">
			
 
				+                  <div class="II-flex">
			
 
				+                    <span class="span1">性别</span>
			
 
				+                    <span class="span2">-</span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <div class="II-body-bottom">
			
 
				+                  <div class="II-flex">
			
 
				+                    <span class="span1">生日</span>
			
 
				+                    <span class="span2">-</span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </tab>
			
 
				+        <tab title="动态">内容 2</tab>
			
 
				+        <tab title="跟进">内容 3</tab>
			
 
				+        <tab title="商机">内容 4</tab>
			
 
				+        <tab title="订单">内容 5</tab>
			
 
				+      </tabs>
			
 
				+    </div>
			
 
				   </div>
			
 
				 </template>
			
 
				-
			
 
				+  
			
 
				 <script>
			
 
				+import { Tab, Tabs } from "vant";
			
 
				 export default {
			
 
				   data () {
			
 
				     return {
			
 
				       wx_password: "淡忘-zhouzhandui",
			
 
				-    }
			
 
				-  },
			
 
				-  methods: {
			
 
				-
			
 
				-  },
			
 
				-  mounted () {
			
 
				-
			
 
				+      xinxipass: "zhouzhandui",
			
 
				+      active: 0,
			
 
				+    };
			
 
				   },
			
 
				+  methods: {},
			
 
				+  mounted () { },
			
 
				   components: {
			
 
				-
			
 
				-  }
			
 
				-}
			
 
				+    Tab, Tabs
			
 
				+  },
			
 
				+};
			
 
				 </script>
			
 
				-
			
 
				-<style lang="scss">
			
 
				+  
			
 
				+<style lang="scss" scoped>
			
 
				 #FuzeRen {
			
 
				-  width: 100vw;
			
 
				-  height: 100vh;
			
 
				+  width: 37.5rem;
			
 
				+  //   height: 100%;
			
 
				   background-color: #f2f4f8;
			
 
				+  box-sizing: border-box;
			
 
				 
			
 
				   .top-color {
			
 
				-    width: 100vw;
			
 
				-    height: 17vh;
			
 
				+    width: 37.5rem;
			
 
				+    height: 10rem;
			
 
				     background-image: linear-gradient(to bottom, #3974c7, #f2f4f8);
			
 
				-    position: fixed;
			
 
				+    // position: fixed;
			
 
				+    padding: 0 1rem;
			
 
				+    padding-top: 2rem;
			
 
				+    box-sizing: border-box;
			
 
				+
			
 
				+    .top-fuzeren {
			
 
				+      height: 2rem;
			
 
				+      overflow: hidden;
			
 
				+
			
 
				+      /* font-size: 14px !important;
			
 
				+                  font-weight: 500; */
			
 
				+      .top-fuzeren-fs {
			
 
				+        color: #fff;
			
 
				+        font-size: 1.4rem !important;
			
 
				+        font-weight: 500;
			
 
				+      }
			
 
				+    }
			
 
				   }
			
 
				 
			
 
				   .PersonalInformation {
			
 
				-    width: 95vw;
			
 
				-    height: 23vh;
			
 
				+    width: 35.5rem;
			
 
				+    height: 16rem;
			
 
				     background-color: #fff;
			
 
				-    border-radius: 1vh;
			
 
				+    border-radius: 0.6rem;
			
 
				     position: relative;
			
 
				     z-index: 1;
			
 
				-    top: 8vh;
			
 
				+    top: -8vh;
			
 
				     margin: 0 auto;
			
 
				 
			
 
				     .PI-bodyInnerblock {
			
 
				-      width: 90vw;
			
 
				-      height: 20vh;
			
 
				-      background-color: #ffeaea;
			
 
				-      margin: 0 auto;
			
 
				+      width: 33.5rem;
			
 
				+      height: 16rem;
			
 
				+      // background-color: #ffeaea;
			
 
				+      margin: 2vh auto;
			
 
				       padding-top: 3vh;
			
 
				 
			
 
				-      .wx_password {
			
 
				-        p {
			
 
				-          color: #333;
			
 
				+      .PI-Bflex {
			
 
				+        display: flex;
			
 
				+
			
 
				+        .PI-Bleft {
			
 
				+          width: 24.5rem;
			
 
				+          height: 8vh;
			
 
				+
			
 
				+          .OneCeng {
			
 
				+            width: 19.1rem;
			
 
				+            height: 2.1rem;
			
 
				+            // background-color: #ffe5c8;
			
 
				+            // font-size: 10px;
			
 
				+            margin-bottom: 1rem;
			
 
				+
			
 
				+            .wx_password {
			
 
				+
			
 
				+              //   margin-bottom: 1rem;
			
 
				+              span {
			
 
				+                color: #333;
			
 
				+                font-size: 1.6rem;
			
 
				+              }
			
 
				+            }
			
 
				+          }
			
 
				+
			
 
				+          .KeyWordss {
			
 
				+            width: 24rem;
			
 
				+            height: 2rem;
			
 
				+            // background-color: #ff6565;
			
 
				+            margin-top: 1vh;
			
 
				+            display: flex;
			
 
				+
			
 
				+            .First-kw {
			
 
				+              width: 10.7vw;
			
 
				+              height: 3vh;
			
 
				+              background-color: #eff9ed;
			
 
				+              border-radius: 0.5vh;
			
 
				+              text-align: center;
			
 
				+              margin-right: 1vw;
			
 
				+
			
 
				+              span {
			
 
				+                color: #68c452;
			
 
				+                line-height: 3vh;
			
 
				+                font-size: 1.2em;
			
 
				+              }
			
 
				+            }
			
 
				+
			
 
				+            .Second-kw {
			
 
				+              width: 18vw;
			
 
				+              height: 3vh;
			
 
				+              background-color: #fff5e5;
			
 
				+              border-radius: 0.5vh;
			
 
				+              text-align: center;
			
 
				+              margin-right: 1vw;
			
 
				+
			
 
				+              span {
			
 
				+                color: #ff9e00;
			
 
				+                line-height: 3vh;
			
 
				+                font-size: 1.2em;
			
 
				+              }
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .PI-Bright {
			
 
				+          width: 9rem;
			
 
				+          height: 8vh;
			
 
				+          display: flex;
			
 
				+          justify-content: right;
			
 
				+
			
 
				+          .PSicon {
			
 
				+            width: 12.8vw;
			
 
				+            height: 7vh;
			
 
				+            background-color: #e7ebff;
			
 
				+            // float: right;
			
 
				+            border-radius: 1.5vh;
			
 
				+            text-align: center;
			
 
				+            line-height: 7vh;
			
 
				+
			
 
				+            span {
			
 
				+              font-size: 1rem;
			
 
				+              color: #7698eb;
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .ContactDetails {
			
 
				+        width: 85vw;
			
 
				+        height: 3.9vh;
			
 
				+        background-color: #f8f9fb;
			
 
				+        // background-color: #9cbdff;
			
 
				+        margin-top: 1.5vh;
			
 
				+        border-radius: 0.5vh;
			
 
				+        padding: 0 2.5vw;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+
			
 
				+        .span1 {
			
 
				+          color: #cdd4da;
			
 
				+          font-size: 1.2rem;
			
 
				+        }
			
 
				+
			
 
				+        .span2 {
			
 
				+          color: #adadad;
			
 
				+          font-size: 1.2rem;
			
 
				+          margin-left: 1.5vw;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .TelephoneChat {
			
 
				+        width: 90vw;
			
 
				+        height: 7.3vh;
			
 
				+        display: flex;
			
 
				+        justify-content: center;
			
 
				+        align-items: center;
			
 
				+
			
 
				+        .Telephone {
			
 
				+          width: 44vw;
			
 
				+          height: 7.3vh;
			
 
				+          background-color: #fff;
			
 
				+          display: flex;
			
 
				+          justify-content: center;
			
 
				+          align-items: center;
			
 
				+
			
 
				+          .span1 {
			
 
				+            font-size: 1.6rem;
			
 
				+            color: #3dc063;
			
 
				+          }
			
 
				+
			
 
				+          .Tp-text {
			
 
				+            color: #333;
			
 
				+            font-size: 1.4rem;
			
 
				+            margin-left: 1vh;
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .Chat {
			
 
				+          width: 44vw;
			
 
				+          height: 7.3vh;
			
 
				+          background-color: #fff;
			
 
				+          display: flex;
			
 
				+          justify-content: center;
			
 
				+          align-items: center;
			
 
				+
			
 
				+          .span2 {
			
 
				+            font-size: 1.6rem;
			
 
				+            color: #2b60dd;
			
 
				+          }
			
 
				+
			
 
				+          .Ch-text {
			
 
				+            color: #333;
			
 
				+            font-size: 1.4rem;
			
 
				+            margin-left: 1vh;
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        span {
			
 
				           font-size: 1.6rem;
			
 
				+          color: #ececec;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.TagsModule {
			
 
				+  width: 95vw;
			
 
				+  height: 11vh;
			
 
				+  background-color: #fff;
			
 
				+  border-radius: 1vh;
			
 
				+  position: relative;
			
 
				+  top: -8vh;
			
 
				+  margin: 0 auto;
			
 
				+  margin-top: 1.5vh;
			
 
				+
			
 
				+  .TagsModuleInnerblock {
			
 
				+    width: 90vw;
			
 
				+    height: 8.5vh;
			
 
				+    // background-color: #ffeaea;
			
 
				+    margin: 0 auto;
			
 
				+    padding-top: 2.5vh;
			
 
				+
			
 
				+    .TagsModule-p {
			
 
				+      color: #999;
			
 
				+      font-size: 1.2rem;
			
 
				+    }
			
 
				+
			
 
				+    .label {
			
 
				+      width: 90vw;
			
 
				+      height: 3vh;
			
 
				+      // background-color: #ff6565;
			
 
				+      margin-top: 1.2vh;
			
 
				+      display: flex;
			
 
				+
			
 
				+      .First-label {
			
 
				+        // width: 10.7vw;
			
 
				+        height: 3vh;
			
 
				+        background-color: #e9effc;
			
 
				+        border-radius: 0.5vh;
			
 
				+        text-align: center;
			
 
				+        margin-right: 1vw;
			
 
				+        padding: 0 1.5vw;
			
 
				+
			
 
				+        span {
			
 
				+          color: #2b60dd;
			
 
				+          line-height: 3vh;
			
 
				+          font-size: 1.2rem;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .Second-label {
			
 
				+        width: 18vw;
			
 
				+        height: 3vh;
			
 
				+        background-color: #fff5e5;
			
 
				+        border-radius: 0.5vh;
			
 
				+        text-align: center;
			
 
				+        margin-right: 1vw;
			
 
				+
			
 
				+        span {
			
 
				+          color: #ff9e00;
			
 
				+          line-height: 3vh;
			
 
				+          font-size: 1.2em;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+.RelationshipAnalysis {
			
 
				+  width: 91vw;
			
 
				+  height: 14vh;
			
 
				+  background-color: #fff;
			
 
				+  border-radius: 1vh;
			
 
				+  position: relative;
			
 
				+  top: -8vh;
			
 
				+  margin: 0 auto;
			
 
				+  margin-top: 1.5vh;
			
 
				+  padding: 0 2vw;
			
 
				+
			
 
				+  .RA-body {
			
 
				+    width: 91vw;
			
 
				+    height: 14vh;
			
 
				+
			
 
				+    // background-color: #ffeded;
			
 
				+    .RA-body-guanxi {
			
 
				+      width: 91vw;
			
 
				+      height: 7vh;
			
 
				+      border-bottom: 0.1rem solid #f6f6f6;
			
 
				+      // background-color: #ffe8c9;
			
 
				+      display: flex;
			
 
				+
			
 
				+      .RBG-tit {
			
 
				+        width: 14vw;
			
 
				+        height: 7vh;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+
			
 
				+        // background-color: #ffb6b6;
			
 
				+        .GX-tit {
			
 
				+          color: #999;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .RBG-bd {
			
 
				+        width: 77vw;
			
 
				+        height: 7vh;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+
			
 
				+        // background-color: #ff9a9a;
			
 
				+        .GX-bd {
			
 
				+          color: #333;
			
 
				+          font-size: 1.2rem;
			
 
				+        }
			
 
				+
			
 
				+        .GX-bd-fgx {
			
 
				+          color: #d5d5d5;
			
 
				+          margin: 0 1vh;
			
 
				+          font-size: 1.2rem;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .RA-body-fenxi {
			
 
				+      width: 91vw;
			
 
				+      height: 6.8vh;
			
 
				+      // background-color: #ffd6a0;
			
 
				+      display: flex;
			
 
				+
			
 
				+      .RBF-tit {
			
 
				+        width: 14vw;
			
 
				+        height: 6.8vh;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+
			
 
				+        // background-color: #ffb6b6;
			
 
				+        .FX-tit {
			
 
				+          color: #999;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .RBF-bd {
			
 
				+        width: 77vw;
			
 
				+        height: 6.8vh;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+
			
 
				+        // background-color: #ff9a9a;
			
 
				+        .FX-bd {
			
 
				+          color: #333;
			
 
				+          font-size: 1.2rem;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+// .LabelBarModule{
			
 
				+//     width: 100vw;
			
 
				+//     height: 60vh;
			
 
				+//     // background-color: #fff;
			
 
				+//     border-radius: 1vh;
			
 
				+//     position: relative;
			
 
				+//     top: -8vh;
			
 
				+//     margin: 0 auto;
			
 
				+//     margin-top: 1.5vh;
			
 
				+//     // padding: 0 2vw;
			
 
				+//     // .van-tabs__nav--line{
			
 
				+//     //     height: 10vh;
			
 
				+//     // }
			
 
				+//     .van-tabs__wrap{
			
 
				+//         // padding: 10px 0;
			
 
				+//         // line-height: 0;
			
 
				+//         width: 100vw;
			
 
				+//         height: 5vh;
			
 
				+//         background-color: #fff;
			
 
				+//         .van-tab{
			
 
				+//             line-height: 5vh;
			
 
				+//             color: #8c8c8c;
			
 
				+//         }
			
 
				+//         .van-tab--active{
			
 
				+//             color: #2b60dd;
			
 
				+//         }
			
 
				+
			
 
				+//     }
			
 
				+//     .van-tabs__line{
			
 
				+//         width: 6vw;
			
 
				+//         height: 0.2vh;
			
 
				+//         background-color: #2b60dd;
			
 
				+//     }
			
 
				+//     .TabsXiangqing{
			
 
				+//         width: 100vw;
			
 
				+//         height: 120vh;
			
 
				+//         background-color: #f2f4f8;
			
 
				+//         .BasicInformation{
			
 
				+//             width: 96vw;
			
 
				+//             height: 29vh;
			
 
				+//             background-color: #f2f4f8;
			
 
				+//             padding: 0 2vw;
			
 
				+//             .BI-title{
			
 
				+//                 width: 96vw;
			
 
				+//                 height: 7vh;
			
 
				+//                 display: flex;
			
 
				+//                 align-items: center;
			
 
				+//                 span{
			
 
				+//                     color: #999;
			
 
				+//                     font-size: 1.2rem;
			
 
				+//                 }
			
 
				+//             }
			
 
				+//             .BI-body{
			
 
				+//                 width: 88vw;
			
 
				+//                 height: 22vh;
			
 
				+//                 border-radius: 1vh;
			
 
				+//                 background-color: #fff;
			
 
				+//                 padding: 0 4vw;
			
 
				+//                 .BI-body-top{
			
 
				+//                     width: 92vw;
			
 
				+//                     height: 11vh;
			
 
				+//                     border-bottom: 0.1rem solid #f6f6f6;
			
 
				+//                     display: flex;
			
 
				+//                     align-items: center;
			
 
				+//                     .BI-flex{
			
 
				+//                         .span1,
			
 
				+//                         .span2{
			
 
				+//                             display: block;
			
 
				+//                         }
			
 
				+
			
 
				+//                         .span1{
			
 
				+//                             color: #999;
			
 
				+//                             margin-bottom: 1vh;
			
 
				+//                         }
			
 
				+//                         .span2{
			
 
				+//                             color: #666;
			
 
				+//                             font-size: 1.4rem;
			
 
				+//                         }
			
 
				+//                     }
			
 
				+//                 }
			
 
				+//                 .BI-body-bottom{
			
 
				+//                     width: 92vw;
			
 
				+//                     height: 10.7vh;
			
 
				+//                     display: flex;
			
 
				+//                     align-items: center;
			
 
				+//                     .BI-flex{
			
 
				+//                         .span1,
			
 
				+//                         .span2{
			
 
				+//                             display: block;
			
 
				+//                         }
			
 
				+
			
 
				+//                         .span1{
			
 
				+//                             color: #999;
			
 
				+//                             margin-bottom: 1vh;
			
 
				+//                         }
			
 
				+//                         .span2{
			
 
				+//                             color: #666;
			
 
				+//                             font-size: 1.4rem;
			
 
				+//                         }
			
 
				+//                     }
			
 
				+//                 }
			
 
				+//             }
			
 
				+//         }
			
 
				+//         .ContactInformation{
			
 
				+//             width: 96vw;
			
 
				+//             height: 51vh;
			
 
				+//             background-color: #f2f4f8;
			
 
				+//             padding: 0 2vw;
			
 
				+//             .CI-title{
			
 
				+//                 width: 96vw;
			
 
				+//                 height: 7vh;
			
 
				+//                 display: flex;
			
 
				+//                 align-items: center;
			
 
				+//                 span{
			
 
				+//                     color: #999;
			
 
				+//                     font-size: 1.2rem;
			
 
				+//                 }
			
 
				+//             }
			
 
				+//             .CI-body{
			
 
				+//                 width: 88vw;
			
 
				+//                 height: 44vh;
			
 
				+//                 border-radius: 1vh;
			
 
				+//                 background-color: #fff;
			
 
				+//                 padding: 0 4vw;
			
 
				+//                 .CI-body-first{
			
 
				+//                     width: 92vw;
			
 
				+//                     height: 11vh;
			
 
				+//                     border-bottom: 0.1rem solid #f6f6f6;
			
 
				+//                     display: flex;
			
 
				+//                     align-items: center;
			
 
				+//                     .CI-flex{
			
 
				+//                         .span1,
			
 
				+//                         .span2{
			
 
				+//                             display: block;
			
 
				+//                         }
			
 
				+
			
 
				+//                         .span1{
			
 
				+//                             color: #999;
			
 
				+//                             margin-bottom: 1vh;
			
 
				+//                         }
			
 
				+//                         .span2{
			
 
				+//                             color: #2b60dd;
			
 
				+//                             font-size: 1.4rem;
			
 
				+//                         }
			
 
				+//                     }
			
 
				+//                 }
			
 
				+//                 .CI-body-second{
			
 
				+//                     width: 92vw;
			
 
				+//                     height: 11vh;
			
 
				+//                     border-bottom: 0.1rem solid #f6f6f6;
			
 
				+//                     display: flex;
			
 
				+//                     align-items: center;
			
 
				+//                     .CI-flex{
			
 
				+//                         .span1,
			
 
				+//                         .span2{
			
 
				+//                             display: block;
			
 
				+//                         }
			
 
				+
			
 
				+//                         .span1{
			
 
				+//                             color: #999;
			
 
				+//                             margin-bottom: 1vh;
			
 
				+//                         }
			
 
				+//                         .span2{
			
 
				+//                             color: #666;
			
 
				+//                             font-size: 1.4rem;
			
 
				+//                         }
			
 
				+//                     }
			
 
				+//                 }
			
 
				+//                 .CI-body-third{
			
 
				+//                     width: 92vw;
			
 
				+//                     height: 11vh;
			
 
				+//                     border-bottom: 0.1rem solid #f6f6f6;
			
 
				+//                     display: flex;
			
 
				+//                     align-items: center;
			
 
				+//                     .CI-flex{
			
 
				+//                         .span1,
			
 
				+//                         .span2{
			
 
				+//                             display: block;
			
 
				+//                         }
			
 
				+
			
 
				+//                         .span1{
			
 
				+//                             color: #999;
			
 
				+//                             margin-bottom: 1vh;
			
 
				+//                         }
			
 
				+//                         .span2{
			
 
				+//                             color: #666;
			
 
				+//                             font-size: 1.4rem;
			
 
				+//                         }
			
 
				+//                     }
			
 
				+//                 }
			
 
				+//                 .CI-body-fouth{
			
 
				+//                     width: 92vw;
			
 
				+//                     height: 10.7vh;
			
 
				+//                     display: flex;
			
 
				+//                     align-items: center;
			
 
				+//                     .CI-flex{
			
 
				+//                         .span1,
			
 
				+//                         .span2{
			
 
				+//                             display: block;
			
 
				+//                         }
			
 
				+
			
 
				+//                         .span1{
			
 
				+//                             color: #999;
			
 
				+//                             margin-bottom: 1vh;
			
 
				+//                         }
			
 
				+//                         .span2{
			
 
				+//                             color: #666;
			
 
				+//                             font-size: 1.4rem;
			
 
				+//                         }
			
 
				+//                     }
			
 
				+//                 }
			
 
				+//             }
			
 
				+//         }
			
 
				+//         .IdentityInformation{
			
 
				+//             width: 96vw;
			
 
				+//             height: 29vh;
			
 
				+//             background-color: #f2f4f8;
			
 
				+//             padding: 0 2vw;
			
 
				+//             .II-title{
			
 
				+//                 width: 96vw;
			
 
				+//                 height: 7vh;
			
 
				+//                 display: flex;
			
 
				+//                 align-items: center;
			
 
				+//                 span{
			
 
				+//                     color: #999;
			
 
				+//                     font-size: 1.2rem;
			
 
				+//                 }
			
 
				+//             }
			
 
				+//             .II-body{
			
 
				+//                 width: 88vw;
			
 
				+//                 height: 22vh;
			
 
				+//                 border-radius: 1vh;
			
 
				+//                 background-color: #fff;
			
 
				+//                 padding: 0 4vw;
			
 
				+//                 .II-body-top{
			
 
				+//                     width: 92vw;
			
 
				+//                     height: 11vh;
			
 
				+//                     border-bottom: 0.1rem solid #f6f6f6;
			
 
				+//                     display: flex;
			
 
				+//                     align-items: center;
			
 
				+//                     .II-flex{
			
 
				+//                         .span1,
			
 
				+//                         .span2{
			
 
				+//                             display: block;
			
 
				+//                         }
			
 
				+
			
 
				+//                         .span1{
			
 
				+//                             color: #999;
			
 
				+//                             margin-bottom: 1vh;
			
 
				+//                         }
			
 
				+//                         .span2{
			
 
				+//                             color: #666;
			
 
				+//                             font-size: 1.4rem;
			
 
				+//                         }
			
 
				+//                     }
			
 
				+//                 }
			
 
				+//                 .II-body-bottom{
			
 
				+//                     width: 92vw;
			
 
				+//                     height: 10.7vh;
			
 
				+//                     display: flex;
			
 
				+//                     align-items: center;
			
 
				+//                     .II-flex{
			
 
				+//                         .span1,
			
 
				+//                         .span2{
			
 
				+//                             display: block;
			
 
				+//                         }
			
 
				+
			
 
				+//                         .span1{
			
 
				+//                             color: #666;
			
 
				+//                             margin-bottom: 1vh;
			
 
				+//                         }
			
 
				+//                         .span2{
			
 
				+//                             color: #666;
			
 
				+//                             font-size: 1.4rem;
			
 
				+//                         }
			
 
				+//                     }
			
 
				+//                 }
			
 
				+//             }
			
 
				+//         }
			
 
				+
			
 
				+//     }
			
 
				+// }
			
 
				+</style>
			
 
				+  
			
 
				+  <!-- vantui -->
			
 
				+<style lang="scss">
			
 
				+.LabelBarModule {
			
 
				+  width: 100vw;
			
 
				+  height: 60vh;
			
 
				+  // background-color: #fff;
			
 
				+  border-radius: 1vh;
			
 
				+  position: relative;
			
 
				+  top: -8vh;
			
 
				+  margin: 0 auto;
			
 
				+  margin-top: 1.5vh;
			
 
				+
			
 
				+  // padding: 0 2vw;
			
 
				+  // .van-tabs__nav--line{
			
 
				+  //     height: 10vh;
			
 
				+  // }
			
 
				+  .van-tabs__wrap {
			
 
				+    // padding: 10px 0;
			
 
				+    // line-height: 0;
			
 
				+    width: 100vw;
			
 
				+    height: 5vh;
			
 
				+    background-color: #fff;
			
 
				+
			
 
				+    .van-tab {
			
 
				+      line-height: 5vh;
			
 
				+      color: #8c8c8c;
			
 
				+    }
			
 
				+
			
 
				+    .van-tab--active {
			
 
				+      color: #2b60dd;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .van-tabs__line {
			
 
				+    width: 6vw;
			
 
				+    height: 0.2vh;
			
 
				+    background-color: #2b60dd;
			
 
				+  }
			
 
				+
			
 
				+  .TabsXiangqing {
			
 
				+    width: 100vw;
			
 
				+    height: 120vh;
			
 
				+    background-color: #f2f4f8;
			
 
				+
			
 
				+    .BasicInformation {
			
 
				+      width: 96vw;
			
 
				+      height: 29vh;
			
 
				+      background-color: #f2f4f8;
			
 
				+      padding: 0 2vw;
			
 
				+
			
 
				+      .BI-title {
			
 
				+        width: 96vw;
			
 
				+        height: 7vh;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+
			
 
				+        span {
			
 
				+          color: #999;
			
 
				+          font-size: 1.2rem;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .BI-body {
			
 
				+        width: 88vw;
			
 
				+        height: 22vh;
			
 
				+        border-radius: 1vh;
			
 
				+        background-color: #fff;
			
 
				+        padding: 0 4vw;
			
 
				+
			
 
				+        .BI-body-top {
			
 
				+          width: 92vw;
			
 
				+          height: 11vh;
			
 
				+          border-bottom: 0.1rem solid #f6f6f6;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+
			
 
				+          .BI-flex {
			
 
				+
			
 
				+            .span1,
			
 
				+            .span2 {
			
 
				+              display: block;
			
 
				+            }
			
 
				+
			
 
				+            .span1 {
			
 
				+              color: #999;
			
 
				+              margin-bottom: 1vh;
			
 
				+            }
			
 
				+
			
 
				+            .span2 {
			
 
				+              color: #666;
			
 
				+              font-size: 1.4rem;
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .BI-body-bottom {
			
 
				+          width: 92vw;
			
 
				+          height: 10.7vh;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+
			
 
				+          .BI-flex {
			
 
				+
			
 
				+            .span1,
			
 
				+            .span2 {
			
 
				+              display: block;
			
 
				+            }
			
 
				+
			
 
				+            .span1 {
			
 
				+              color: #999;
			
 
				+              margin-bottom: 1vh;
			
 
				+            }
			
 
				+
			
 
				+            .span2 {
			
 
				+              color: #666;
			
 
				+              font-size: 1.4rem;
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .ContactInformation {
			
 
				+      width: 96vw;
			
 
				+      height: 51vh;
			
 
				+      background-color: #f2f4f8;
			
 
				+      padding: 0 2vw;
			
 
				+
			
 
				+      .CI-title {
			
 
				+        width: 96vw;
			
 
				+        height: 7vh;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+
			
 
				+        span {
			
 
				+          color: #999;
			
 
				+          font-size: 1.2rem;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .CI-body {
			
 
				+        width: 88vw;
			
 
				+        height: 44vh;
			
 
				+        border-radius: 1vh;
			
 
				+        background-color: #fff;
			
 
				+        padding: 0 4vw;
			
 
				+
			
 
				+        .CI-body-first {
			
 
				+          width: 92vw;
			
 
				+          height: 11vh;
			
 
				+          border-bottom: 0.1rem solid #f6f6f6;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+
			
 
				+          .CI-flex {
			
 
				+
			
 
				+            .span1,
			
 
				+            .span2 {
			
 
				+              display: block;
			
 
				+            }
			
 
				+
			
 
				+            .span1 {
			
 
				+              color: #999;
			
 
				+              margin-bottom: 1vh;
			
 
				+            }
			
 
				+
			
 
				+            .span2 {
			
 
				+              color: #2b60dd;
			
 
				+              font-size: 1.4rem;
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .CI-body-second {
			
 
				+          width: 92vw;
			
 
				+          height: 11vh;
			
 
				+          border-bottom: 0.1rem solid #f6f6f6;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+
			
 
				+          .CI-flex {
			
 
				+
			
 
				+            .span1,
			
 
				+            .span2 {
			
 
				+              display: block;
			
 
				+            }
			
 
				+
			
 
				+            .span1 {
			
 
				+              color: #999;
			
 
				+              margin-bottom: 1vh;
			
 
				+            }
			
 
				+
			
 
				+            .span2 {
			
 
				+              color: #666;
			
 
				+              font-size: 1.4rem;
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .CI-body-third {
			
 
				+          width: 92vw;
			
 
				+          height: 11vh;
			
 
				+          border-bottom: 0.1rem solid #f6f6f6;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+
			
 
				+          .CI-flex {
			
 
				+
			
 
				+            .span1,
			
 
				+            .span2 {
			
 
				+              display: block;
			
 
				+            }
			
 
				+
			
 
				+            .span1 {
			
 
				+              color: #999;
			
 
				+              margin-bottom: 1vh;
			
 
				+            }
			
 
				+
			
 
				+            .span2 {
			
 
				+              color: #666;
			
 
				+              font-size: 1.4rem;
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .CI-body-fouth {
			
 
				+          width: 92vw;
			
 
				+          height: 10.7vh;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+
			
 
				+          .CI-flex {
			
 
				+
			
 
				+            .span1,
			
 
				+            .span2 {
			
 
				+              display: block;
			
 
				+            }
			
 
				+
			
 
				+            .span1 {
			
 
				+              color: #999;
			
 
				+              margin-bottom: 1vh;
			
 
				+            }
			
 
				+
			
 
				+            .span2 {
			
 
				+              color: #666;
			
 
				+              font-size: 1.4rem;
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .IdentityInformation {
			
 
				+      width: 96vw;
			
 
				+      height: 29vh;
			
 
				+      background-color: #f2f4f8;
			
 
				+      padding: 0 2vw;
			
 
				+
			
 
				+      .II-title {
			
 
				+        width: 96vw;
			
 
				+        height: 7vh;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+
			
 
				+        span {
			
 
				+          color: #999;
			
 
				+          font-size: 1.2rem;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      .II-body {
			
 
				+        width: 88vw;
			
 
				+        height: 22vh;
			
 
				+        border-radius: 1vh;
			
 
				+        background-color: #fff;
			
 
				+        padding: 0 4vw;
			
 
				+
			
 
				+        .II-body-top {
			
 
				+          width: 92vw;
			
 
				+          height: 11vh;
			
 
				+          border-bottom: 0.1rem solid #f6f6f6;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+
			
 
				+          .II-flex {
			
 
				+
			
 
				+            .span1,
			
 
				+            .span2 {
			
 
				+              display: block;
			
 
				+            }
			
 
				+
			
 
				+            .span1 {
			
 
				+              color: #999;
			
 
				+              margin-bottom: 1vh;
			
 
				+            }
			
 
				+
			
 
				+            .span2 {
			
 
				+              color: #666;
			
 
				+              font-size: 1.4rem;
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        .II-body-bottom {
			
 
				+          width: 92vw;
			
 
				+          height: 10.7vh;
			
 
				+          display: flex;
			
 
				+          align-items: center;
			
 
				+
			
 
				+          .II-flex {
			
 
				+
			
 
				+            .span1,
			
 
				+            .span2 {
			
 
				+              display: block;
			
 
				+            }
			
 
				+
			
 
				+            .span1 {
			
 
				+              color: #666;
			
 
				+              margin-bottom: 1vh;
			
 
				+            }
			
 
				+
			
 
				+            .span2 {
			
 
				+              color: #666;
			
 
				+              font-size: 1.4rem;
			
 
				+            }
			
 
				+          }
			
 
				         }
			
 
				       }
			
 
				     }
			
--- a/src/views/userindex/imgs/u=2503372846,402736698&fm=253&fmt=auto&app=120&f=JPEG.webp
+++ b/src/views/userindex/imgs/u=2503372846,402736698&fm=253&fmt=auto&app=120&f=JPEG.webp
--- a/src/views/userindex/imgs/u=2521003561,2654141216&fm=253&fmt=auto&app=138&f=JPEG.webp
+++ b/src/views/userindex/imgs/u=2521003561,2654141216&fm=253&fmt=auto&app=138&f=JPEG.webp
--- a/src/views/userindex/imgs/u=63249423,2260265143&fm=253&fmt=auto&app=120&f=JPEG.webp
+++ b/src/views/userindex/imgs/u=63249423,2260265143&fm=253&fmt=auto&app=120&f=JPEG.webp
--- a/src/views/userindex/imgs/u=638285213,1746517464&fm=253&fmt=auto&app=120&f=JPEG.webp
+++ b/src/views/userindex/imgs/u=638285213,1746517464&fm=253&fmt=auto&app=120&f=JPEG.webp
--- a/src/views/userindex/indexpage/ArticleIndex.vue
+++ b/src/views/userindex/indexpage/ArticleIndex.vue
@@ -0,0 +1,190 @@
 
				+<template>
			
 
				+  <div class="indexbox">
			
 
				+    <h1>{{ textdetaildata.title }}</h1>
			
 
				+    <div class="publisher">
			
 
				+      <img style="width: 10vw;height: 10vw;border-radius: 50%;" :src="textdetaildata.cover" alt="">
			
 
				+      <p>{{ textdetaildata.creator_name }}</p>
			
 
				+      <span>{{ textdetaildata.create_datetime }}</span>
			
 
				+    </div>
			
 
				+    <div v-html="textdetaildata.content" class="container">
			
 
				+    </div>
			
 
				+    <div class="like">
			
 
				+      <span>阅读量:{{ textdetaildata.read_count }}</span>
			
 
				+
			
 
				+      <span :class="isgood ? 'note' : 'pith'" id="clickgood" @click="clkgood">{{ isgood ? '已点赞' : '点赞' }}</span>
			
 
				+    </div>
			
 
				+    <div class="contacts">
			
 
				+      <div>
			
 
				+        <h3>{{ textdetaildata.creator_name }}</h3>
			
 
				+        <div style="padding-bottom: 2vh;">河南建工集团||董事长</div>
			
 
				+        <div style="margin-bottom: 3vw;"><span class="iconfont icon-weixin" @click="showPopup"></span><span
			
 
				+            class="iconfont icon-dianhua"></span></div>
			
 
				+      </div>
			
 
				+      <popup v-model="show" closeable position="bottom" :style="{ height: '30%' }" />
			
 
				+      <div>
			
 
				+        <img style="width: 15vw;height: 15vw;border-radius: 50%;" :src="textdetaildata.cover" alt="">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+<script>
			
 
				+import { textdetailInfo, clkgoodInfo } from "../../../../serves/prove";
			
 
				+import { Toast, Popup } from "vant";
			
 
				+export default {
			
 
				+  data () {
			
 
				+    return {
			
 
				+      textdetaildata: {},
			
 
				+      isgood: '',
			
 
				+      show: false,
			
 
				+    }
			
 
				+  },
			
 
				+  mounted () {
			
 
				+    this.textdetailapi()
			
 
				+  },
			
 
				+  components: { Popup },
			
 
				+  methods: {
			
 
				+    //底部弹出
			
 
				+    showPopup () {
			
 
				+      this.show = true;
			
 
				+    },
			
 
				+    //点赞接口
			
 
				+    clkgood () {
			
 
				+      if (this.isgood) {
			
 
				+        Toast.fail('不能取消点赞');
			
 
				+      } else {
			
 
				+
			
 
				+        clkgoodInfo(this.$route.query.id, 'WeiQiJia')
			
 
				+        this.isgood = true
			
 
				+        Toast.success('点赞成功');
			
 
				+        console.log(1111);
			
 
				+      }
			
 
				+
			
 
				+    },
			
 
				+    //文章详情借口
			
 
				+    async textdetailapi () {
			
 
				+      const res = await textdetailInfo(this.$route.query.id, 'WeiQiJia', 'employee', '')
			
 
				+      this.textdetaildata = res.data
			
 
				+      this.textdetaildata.flag = false
			
 
				+      if (!res.data.flag) this.clkgood()
			
 
				+      console.log(res.data);
			
 
				+      // this.isgood = res.data.like
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+<style lang="scss" scoped>
			
 
				+.indexbox {
			
 
				+  width: 90vw;
			
 
				+  height: 100vh;
			
 
				+  margin: 0 auto;
			
 
				+  padding-top: 2rem;
			
 
				+  box-sizing: border-box;
			
 
				+
			
 
				+  h1 {
			
 
				+    font-size: 1.8rem;
			
 
				+  }
			
 
				+
			
 
				+  .publisher {
			
 
				+    margin-top: 3vh;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    align-items: end;
			
 
				+    color: gray;
			
 
				+    font-size: 1.6rem;
			
 
				+    margin-bottom: 3vh;
			
 
				+
			
 
				+    p {
			
 
				+      flex: 1;
			
 
				+      padding-left: 2vw;
			
 
				+    }
			
 
				+
			
 
				+  }
			
 
				+
			
 
				+  .contacts {
			
 
				+    padding: 50px;
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+    background-color: rgba(242, 242, 242, 1);
			
 
				+    height: 25vw;
			
 
				+    border-radius: 3vw;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+
			
 
				+    div:nth-child(1) {
			
 
				+      display: flex;
			
 
				+      justify-content: space-between;
			
 
				+      flex-direction: column;
			
 
				+      font-size: .6rem;
			
 
				+
			
 
				+      .iconfont {
			
 
				+        font-size: 2rem;
			
 
				+        margin: 0 10vw 0 0;
			
 
				+        border-radius: 50%;
			
 
				+        padding: .2rem;
			
 
				+        color: white;
			
 
				+      }
			
 
				+
			
 
				+      .icon-weixin {
			
 
				+        background-color: rgb(0, 204, 0);
			
 
				+      }
			
 
				+
			
 
				+      .icon-dianhua {
			
 
				+        background-color: rgb(0, 140, 255);
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .like {
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    margin: 3vh 0 3vh 0;
			
 
				+
			
 
				+    span:nth-child(1) {
			
 
				+      color: gray;
			
 
				+      font-size: 1.6rem;
			
 
				+    }
			
 
				+
			
 
				+    span:nth-child(2) {
			
 
				+      font-size: 1.2rem;
			
 
				+      width: 15vw;
			
 
				+      height: 6vw;
			
 
				+      background-color: rgba(242, 242, 242, 1);
			
 
				+      text-align: center;
			
 
				+      line-height: 6vw;
			
 
				+      border-radius: 6vw;
			
 
				+
			
 
				+
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+}
			
 
				+</style>
			
 
				+<style>
			
 
				+.container img {
			
 
				+  width: 100%;
			
 
				+
			
 
				+}
			
 
				+
			
 
				+.van-icon {
			
 
				+  font-size: 3rem;
			
 
				+}
			
 
				+
			
 
				+.van-toast {
			
 
				+  min-width: 20%;
			
 
				+  min-height: 10vh;
			
 
				+  border-radius: 30px;
			
 
				+}
			
 
				+
			
 
				+.van-toast__text {
			
 
				+  font-size: 1rem;
			
 
				+  /* 自定义字体大小 */
			
 
				+}
			
 
				+
			
 
				+.note {
			
 
				+  background: rgb(0, 140, 255) !important;
			
 
				+}
			
 
				+
			
 
				+.pith {
			
 
				+  background: gray !important;
			
 
				+}
			
 
				+</style>
			
--- a/src/views/userindex/indexpage/UserIndex.vue
+++ b/src/views/userindex/indexpage/UserIndex.vue
@@ -1,35 +1,113 @@
 
				 <template>
			
 
				   <div class="indexbox">
			
 
				     <div class="banner">
			
 
				-      <swipe class="my-swipe" :autoplay="1000" indicator-color="white">
			
 
				-        <swipe-item><img
			
 
				-            src="https://img1.baidu.com/it/u=1919509102,1927615551&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
			
 
				-            alt=""></swipe-item>
			
 
				-        <swipe-item><img src="https://img1.baidu.com/it/u=3539595421,754041626&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
			
 
				-            alt=""></swipe-item>
			
 
				-        <swipe-item>3</swipe-item>
			
 
				-        <swipe-item>4</swipe-item>
			
 
				+      <swipe class="my-swipe" :autoplay="2000" indicator-color="white">
			
 
				+        <swipe-item v-for="(item, index) in swiperimg" :key="index"><img :src="item" alt=""></swipe-item>
			
 
				+
			
 
				       </swipe>
			
 
				     </div>
			
 
				     <div class="title">
			
 
				-      <tabs v-model="active">
			
 
				-        <tab title="标签 1">内容 1</tab>
			
 
				-        <tab title="标签 2">内容 2</tab>
			
 
				-        <tab title="标签 3">内容 3</tab>
			
 
				-        <tab title="标签 4">内容 4</tab>
			
 
				+      <tabs @click="onClick" v-model="active" swipeable animated color="blue">
			
 
				+        <tab v-for="item in category" :title="item.name" :key="item.id">
			
 
				+          <list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
			
 
				+            <div @click="wenzhangdetail(item.id)" class="card" v-for="item in articledata" :key="item.id">
			
 
				+              <img :src="item.cover" alt="">
			
 
				+              <div class="cardtit">
			
 
				+                <h4>{{ item.title }}</h4>
			
 
				+                <p>{{ item.intro }}</p>
			
 
				+                <p><span>{{ item.creator_name
			
 
				+                }}</span><span>{{ item.create_datetime }}</span></p>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </list>
			
 
				+
			
 
				+        </tab>
			
 
				+
			
 
				       </tabs>
			
 
				     </div>
			
 
				+    <div>
			
 
				+
			
 
				+    </div>
			
 
				   </div>
			
 
				 </template>
			
 
				 <script>
			
 
				-import { Swipe, SwipeItem, Tab, Tabs } from 'vant';
			
 
				+import { Swipe, SwipeItem, Tab, Tabs, List, Toast } from 'vant';
			
 
				+import { indexswiperInfo, indexcategoryInfo } from "../../../../serves/prove";
			
 
				 export default {
			
 
				+  data () {
			
 
				+    return {
			
 
				+      active: 0,
			
 
				+      swiperimg: ['https://img2.baidu.com/it/u=3711151361,2067397039&fm=253&fmt=auto&app=120&f=JPEG?w=801&h=500', 'https://img2.baidu.com/it/u=730703936,3583247154&fm=253&fmt=auto&app=120&f=JPEG?w=518&h=323'],//轮播图
			
 
				+      category: [],//文章分类
			
 
				+      articledata: [],//文章内容
			
 
				+      loading: false,
			
 
				+      finished: false,
			
 
				+    }
			
 
				+  },
			
 
				   components: {
			
 
				-    Swipe, SwipeItem, Tab, Tabs
			
 
				+    Swipe, SwipeItem, Tab, Tabs, List,
			
 
				+  },
			
 
				+  mounted () {
			
 
				+    this.indexswiperapi()
			
 
				+    this.indexcategoryapi()
			
 
				+  },
			
 
				+  methods: {
			
 
				+    //轮播图和文章分类数据接口
			
 
				+    async indexswiperapi () {
			
 
				+      const res = await indexswiperInfo()
			
 
				+      if (res.code === 2000) {
			
 
				+        // indexswiperInfo().then(res => {
			
 
				+        //   console.log(res);
			
 
				+        this.category = res.data.category
			
 
				+        // this.swiperimg = res.data.urls
			
 
				+        // console.log(this.category);
			
 
				+        // console.log(this.swiperimg);
			
 
				+        // })
			
 
				+        sessionStorage.setItem('category', JSON.stringify(this.category))
			
 
				+      } else {
			
 
				+        Toast('获取数据失败')
			
 
				+      }
			
 
				+    },
			
 
				+    //文章列表数据
			
 
				+    async indexcategoryapi (id) {
			
 
				+      if (id) {
			
 
				+        const res = await indexcategoryInfo(id)
			
 
				+        console.log(res);
			
 
				+        this.articledata = res.data.data
			
 
				+
			
 
				+      } else {
			
 
				+        const res = await indexcategoryInfo('')
			
 
				+        console.log(res.data);
			
 
				+        this.articledata = res.data.data
			
 
				+
			
 
				+      }
			
 
				+
			
 
				+    },
			
 
				+    onClick (name, title) {
			
 
				+      // console.log(name, title);
			
 
				+      const targetid = this.category.find(obj => obj.name === title)
			
 
				+      console.log(targetid.id);
			
 
				+      this.indexcategoryapi(targetid.id)
			
 
				+    },
			
 
				+    onLoad () {
			
 
				+    },
			
 
				+    wenzhangdetail (id) {
			
 
				+      this.$router.push({ name: 'textpage', query: { id } }
			
 
				+      )
			
 
				+    }
			
 
				   }
			
 
				 }
			
 
				 </script>
			
 
				-<style  lang="scss">
			
 
				+<style>
			
 
				+.van-tabs__wrap {
			
 
				+  height: 3rem !important;
			
 
				+}
			
 
				+
			
 
				+.van-tab {
			
 
				+  line-height: 5rem;
			
 
				+}
			
 
				+</style>
			
 
				+<style scoped  lang="scss">
			
 
				 //swiper
			
 
				 .indexbox {
			
 
				   width: 90vw;
			
@@ -38,6 +116,7 @@ export default {
 
				   padding-top: 2rem;
			
 
				   box-sizing: border-box;
			
 
				 
			
 
				+  //轮播图
			
 
				   .banner {
			
 
				     width: 100%;
			
 
				     height: 15rem;
			
@@ -67,14 +146,51 @@ export default {
 
				     // }
			
 
				   }
			
 
				 
			
 
				+  //标签内容
			
 
				   .title {
			
 
				     padding-top: 2rem;
			
 
				 
			
 
				-    .van-tabs__wrap {
			
 
				-      height: 3rem;
			
 
				 
			
 
				-      .van-tab {
			
 
				-        line-height: 2rem;
			
 
				+
			
 
				+    .card {
			
 
				+      margin-top: 2vh;
			
 
				+      width: 100%;
			
 
				+      height: 15vh;
			
 
				+      display: flex;
			
 
				+      justify-content: space-between;
			
 
				+
			
 
				+      .cardtit {
			
 
				+        width: 57%;
			
 
				+        display: flex;
			
 
				+        flex-direction: column;
			
 
				+        justify-content: space-between;
			
 
				+
			
 
				+        h4 {
			
 
				+          color: black;
			
 
				+          font-size: .6rem;
			
 
				+        }
			
 
				+
			
 
				+        p:nth-child(2) {
			
 
				+          font-size: .5rem;
			
 
				+          color: gray;
			
 
				+          display: -webkit-box;
			
 
				+          -webkit-line-clamp: 2;
			
 
				+          /* 显示两行文本 */
			
 
				+          -webkit-box-orient: vertical;
			
 
				+          overflow: hidden;
			
 
				+          text-overflow: ellipsis;
			
 
				+        }
			
 
				+
			
 
				+        p:nth-child(3) {
			
 
				+          font-size: .5rem;
			
 
				+          display: flex;
			
 
				+          justify-content: space-between;
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      img {
			
 
				+        width: 40%;
			
 
				+        height: 100%;
			
 
				       }
			
 
				     }
			
 
				   }
			
--- a/src/views/userindex/my/MyForward.vue
+++ b/src/views/userindex/my/MyForward.vue
@@ -0,0 +1,157 @@
 
				+<template>
			
 
				+  <div class="indexbox">
			
 
				+    <div>
			
 
				+      <tabs @click="onClick" v-model="active" swipeable animated color="blue">
			
 
				+        <tab v-for="item in category" :key="item.id" :title="item.name">
			
 
				+          <div v-for="item in forwarddata" :key="item.id" class="card">
			
 
				+            <div class="titile">
			
 
				+              <h2 @click="gomyforwarddetail">{{ item.title }}</h2>
			
 
				+              <p>{{ item.count }}人阅读</p>
			
 
				+            </div>
			
 
				+            <img :src="item.cover" alt="">
			
 
				+          </div>
			
 
				+          <div class="nameres">
			
 
				+
			
 
				+          </div>
			
 
				+        </tab>
			
 
				+      </tabs>
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+<script>
			
 
				+import { Tab, Tabs } from 'vant';
			
 
				+import { forwardInfo } from "../../../../serves/prove";
			
 
				+export default {
			
 
				+  data () {
			
 
				+    return {
			
 
				+      active: 0,
			
 
				+      category: [],
			
 
				+      forwarddata: []
			
 
				+    }
			
 
				+  },
			
 
				+  created () {
			
 
				+    //获取本地category数据
			
 
				+    const data = sessionStorage.getItem('category')
			
 
				+    this.category = JSON.parse(data)
			
 
				+    console.log(data);
			
 
				+  },
			
 
				+  mounted () {
			
 
				+    this.forwardapi()
			
 
				+  },
			
 
				+  methods: {
			
 
				+    //点击分类
			
 
				+    onClick (name, title) {
			
 
				+      console.log(name, title);
			
 
				+      console.log(this.category);
			
 
				+      const targetid = this.category.find(obj => obj.name === title)
			
 
				+      console.log(targetid);
			
 
				+      this.forwardapi(targetid.id)
			
 
				+    },
			
 
				+    //获取转发列表数据
			
 
				+    async forwardapi (id) {
			
 
				+      if (id) {
			
 
				+        const res = await forwardInfo('WeiQiJia', id)
			
 
				+        console.log(res);
			
 
				+        this.forwarddata = res.data.data
			
 
				+      } else {
			
 
				+        const res = await forwardInfo('WeiQiJia', '')
			
 
				+        this.forwarddata = res.data.data
			
 
				+      }
			
 
				+
			
 
				+    },
			
 
				+    //点击标题跳转转发详情
			
 
				+    gomyforwarddetail () {
			
 
				+      this.$router.push('myforwarddetail')
			
 
				+    }
			
 
				+
			
 
				+  },
			
 
				+  components: {
			
 
				+    Tab, Tabs
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+<style>
			
 
				+.van-tabs__wrap {
			
 
				+  height: 3rem !important;
			
 
				+}
			
 
				+
			
 
				+.van-tab {
			
 
				+  line-height: 5rem;
			
 
				+}
			
 
				+
			
 
				+.van-tab__text--ellipsis {
			
 
				+  font-size: 1rem !important;
			
 
				+}
			
 
				+</style>
			
 
				+<style lang="scss" scoped>
			
 
				+.indexbox {
			
 
				+  width: 90vw;
			
 
				+  height: 100vh;
			
 
				+  margin: 0 auto;
			
 
				+  padding-top: 2rem;
			
 
				+  box-sizing: border-box;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+
			
 
				+  hr {
			
 
				+    margin-top: 20px;
			
 
				+    border-color: rgb(255, 255, 255, 0.5);
			
 
				+  }
			
 
				+
			
 
				+  .card {
			
 
				+    width: 100%;
			
 
				+    height: 17vw;
			
 
				+    margin-top: 1vh;
			
 
				+    margin-bottom: 5vh;
			
 
				+    box-sizing: border-box;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    border-bottom: 1px solid rgb(185, 185, 185);
			
 
				+
			
 
				+    img {
			
 
				+      width: 30%;
			
 
				+      height: 15vw;
			
 
				+    }
			
 
				+
			
 
				+    .titile {
			
 
				+      display: flex;
			
 
				+      justify-content: space-around;
			
 
				+      flex-direction: column;
			
 
				+
			
 
				+      p {
			
 
				+        font-size: .6rem;
			
 
				+      }
			
 
				+
			
 
				+      h2 {
			
 
				+        font-size: 1.2rem;
			
 
				+      }
			
 
				+
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .nameres {
			
 
				+    div {
			
 
				+      width: 100%;
			
 
				+      display: flex;
			
 
				+      justify-content: space-between;
			
 
				+      align-items: center;
			
 
				+
			
 
				+      p:nth-child(2) {
			
 
				+        flex: 1;
			
 
				+        margin-left: 5vw;
			
 
				+        line-height: 5vh;
			
 
				+      }
			
 
				+
			
 
				+      p:nth-child(3) {
			
 
				+        line-height: 5vh;
			
 
				+      }
			
 
				+
			
 
				+      img {
			
 
				+        width: 5vw;
			
 
				+        height: 5vw;
			
 
				+        border-radius: 50%;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/userindex/my/MyForwarddetail.vue
+++ b/src/views/userindex/my/MyForwarddetail.vue
@@ -0,0 +1,123 @@
 
				+<template>
			
 
				+  <div class="indexbox">
			
 
				+    <div>
			
 
				+
			
 
				+      <div class="card">
			
 
				+        <div class="titile">
			
 
				+          <h2 @click="gowenzhang">我是标题</h2>
			
 
				+          <p>50人阅读</p>
			
 
				+        </div>
			
 
				+        <img src="https://img2.baidu.com/it/u=693798837,2434993543&fm=253&fmt=auto&app=120&f=JPEG?w=890&h=500" alt="">
			
 
				+      </div>
			
 
				+      <div class="nameres">
			
 
				+        <div>
			
 
				+          <img src="https://img2.baidu.com/it/u=693798837,2434993543&fm=253&fmt=auto&app=120&f=JPEG?w=890&h=500" alt="">
			
 
				+          <p>高启强</p>
			
 
				+          <p>2023-6-14&nbsp;23:23:23</p>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+    </div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+<script>
			
 
				+
			
 
				+export default {
			
 
				+  data () {
			
 
				+    return {
			
 
				+      active: 0,
			
 
				+    }
			
 
				+  },
			
 
				+  methods: {
			
 
				+    gowenzhang () {
			
 
				+      this.$router.push('textpage')
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+}
			
 
				+</script>
			
 
				+<style>
			
 
				+.van-tabs__wrap {
			
 
				+  height: 3rem !important;
			
 
				+}
			
 
				+
			
 
				+.van-tab {
			
 
				+  line-height: 5rem;
			
 
				+}
			
 
				+
			
 
				+.van-tab__text--ellipsis {
			
 
				+  font-size: 1rem !important;
			
 
				+}
			
 
				+</style>
			
 
				+<style lang="scss" scoped>
			
 
				+.indexbox {
			
 
				+  width: 90vw;
			
 
				+  height: 100vh;
			
 
				+  margin: 0 auto;
			
 
				+  padding-top: 2rem;
			
 
				+  box-sizing: border-box;
			
 
				+  display: flex;
			
 
				+  flex-direction: column;
			
 
				+
			
 
				+  hr {
			
 
				+    margin-top: 20px;
			
 
				+    border-color: rgb(255, 255, 255, 0.5);
			
 
				+  }
			
 
				+
			
 
				+  .card {
			
 
				+    width: 100%;
			
 
				+    height: 17vw;
			
 
				+    margin-top: 1vh;
			
 
				+    margin-bottom: 5vh;
			
 
				+    box-sizing: border-box;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    border-bottom: 1px solid rgb(185, 185, 185);
			
 
				+
			
 
				+    img {
			
 
				+      width: 30%;
			
 
				+      height: 15vw;
			
 
				+    }
			
 
				+
			
 
				+    .titile {
			
 
				+      display: flex;
			
 
				+      justify-content: space-around;
			
 
				+      flex-direction: column;
			
 
				+
			
 
				+      p {
			
 
				+        font-size: .6rem;
			
 
				+      }
			
 
				+
			
 
				+      h2 {
			
 
				+        font-size: 1.2rem;
			
 
				+      }
			
 
				+
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .nameres {
			
 
				+    div {
			
 
				+      width: 100%;
			
 
				+      display: flex;
			
 
				+      justify-content: space-between;
			
 
				+      align-items: center;
			
 
				+
			
 
				+      p:nth-child(2) {
			
 
				+        flex: 1;
			
 
				+        margin-left: 5vw;
			
 
				+        line-height: 5vh;
			
 
				+      }
			
 
				+
			
 
				+      p:nth-child(3) {
			
 
				+        line-height: 5vh;
			
 
				+      }
			
 
				+
			
 
				+      img {
			
 
				+        width: 5vw;
			
 
				+        height: 5vw;
			
 
				+        border-radius: 50%;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/userindex/my/MyIndex.vue
+++ b/src/views/userindex/my/MyIndex.vue
@@ -0,0 +1,119 @@
 
				+<template>
			
 
				+  <div class="myindex">
			
 
				+    <div class="contacts">
			
 
				+      <div>
			
 
				+        <p>高启强</p>
			
 
				+        <div>河南建工集团||董事长</div>
			
 
				+        <div><span @click="gowexin" class="iconfont icon-weixin"></span><span class="iconfont icon-dianhua"></span></div>
			
 
				+      </div>
			
 
				+      <div>
			
 
				+        <img class="touxiang"
			
 
				+          src="https://img2.baidu.com/it/u=693798837,2434993543&fm=253&fmt=auto&app=120&f=JPEG?w=890&h=500" alt="">
			
 
				+      </div>
			
 
				+    </div>
			
 
				+    <div class="zhuanfabox">
			
 
				+      <hr>
			
 
				+      <p @click="goforward">我的转发
			
 
				+        <icon class="tubiao" name="arrow" size="1rem" color="gray" />
			
 
				+      </p>
			
 
				+      <hr>
			
 
				+    </div>
			
 
				+
			
 
				+  </div>
			
 
				+</template>
			
 
				+<script>
			
 
				+import { Icon } from 'vant'
			
 
				+export default {
			
 
				+  data () {
			
 
				+    return {}
			
 
				+  },
			
 
				+  methods: {
			
 
				+    goforward () {
			
 
				+      this.$router.push('myforward')
			
 
				+    },
			
 
				+    gowexin () {
			
 
				+      console.log(111111);
			
 
				+    }
			
 
				+  },
			
 
				+  components: {
			
 
				+    Icon
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+<style lang="scss" scoped>
			
 
				+.myindex {
			
 
				+  width: 90vw;
			
 
				+  height: 100vh;
			
 
				+  margin: 0 auto;
			
 
				+  padding-top: 2rem;
			
 
				+  box-sizing: border-box;
			
 
				+
			
 
				+  .contacts {
			
 
				+    padding: 50px;
			
 
				+    box-sizing: border-box;
			
 
				+    width: 100%;
			
 
				+    background-color: rgb(242, 242, 242);
			
 
				+    height: 30vw;
			
 
				+    border-radius: 3vw;
			
 
				+    display: flex;
			
 
				+    justify-content: space-between;
			
 
				+    margin-bottom: 5vh;
			
 
				+
			
 
				+    .touxiang {
			
 
				+      width: 15vw;
			
 
				+      height: 15vw;
			
 
				+      border-radius: 50%;
			
 
				+    }
			
 
				+
			
 
				+    div:nth-child(1) {
			
 
				+      display: flex;
			
 
				+      justify-content: space-around;
			
 
				+      flex-direction: column;
			
 
				+      font-size: .6rem;
			
 
				+
			
 
				+      div:nth-child(3) {
			
 
				+        // display: flex;
			
 
				+        // justify-content: space-around;
			
 
				+        // width: 30vw;
			
 
				+
			
 
				+        .iconfont {
			
 
				+          font-size: 2rem;
			
 
				+          margin: 0 10vw 0 0;
			
 
				+          border-radius: 50%;
			
 
				+          padding: .2rem;
			
 
				+          color: white;
			
 
				+        }
			
 
				+
			
 
				+        .icon-weixin {
			
 
				+          background-color: rgb(0, 204, 0);
			
 
				+        }
			
 
				+
			
 
				+        .icon-dianhua {
			
 
				+          background-color: rgb(0, 140, 255);
			
 
				+        }
			
 
				+      }
			
 
				+
			
 
				+      p {
			
 
				+        font-weight: 600;
			
 
				+      }
			
 
				+
			
 
				+
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .zhuanfabox {
			
 
				+    p {
			
 
				+      margin: 2vh 0 2vh 0;
			
 
				+      font-size: .6rem;
			
 
				+    }
			
 
				+
			
 
				+    .tubiao {
			
 
				+      float: right;
			
 
				+    }
			
 
				+
			
 
				+    hr {
			
 
				+      border-color: rgba(255, 255, 255, 0.5);
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>