Ana Sayfa Keşfet Yardım
Üye Ol Giriş Yap
jiaweiqi
/
qw_customer
1
0
Çatalla 0
Dosyalar Sorunlar 0 Değişiklik İstekleri 0 Wiki
Kaynağa Gözat

...

ranyangfan 1 yıl önce
ebeveyn
81827e93a5
işleme
b2ba228b15
32 değiştirilmiş dosya ile 4256 ekleme ve 117 silme
Birleşik Görünüm Farklılık Durumunu Göster
  1. 495 37
      package-lock.json
  2. 4 0
      package.json
  3. 21 15
      public/index.html
  4. 45 0
      serves/axios.js
  5. 13 0
      serves/prove.js
  6. 56 3
      src/App.vue
  7. 539 0
      src/assets/icon/demo.css
  8. 230 0
      src/assets/icon/demo_index.html
  9. 21 0
      src/assets/icon/iconfont.css
  10. 0 0
      src/assets/icon/iconfont.js
  11. 23 0
      src/assets/icon/iconfont.json
  12. BIN
      src/assets/icon/iconfont.ttf
  13. 539 0
      src/assets/iconfont/demo.css
  14. 280 0
      src/assets/iconfont/demo_index.html
  15. 31 0
      src/assets/iconfont/iconfont.css
  16. 0 0
      src/assets/iconfont/iconfont.js
  17. 37 0
      src/assets/iconfont/iconfont.json
  18. BIN
      src/assets/iconfont/iconfont.ttf
  19. BIN
      src/assets/iconfont/iconfont.woff
  20. BIN
      src/assets/iconfont/iconfont.woff2
  21. 6 2
      src/main.js
  22. 33 7
      src/router/index.js
  23. 1158 33
      src/views/Fuzeren/FuzerenView.vue
  24. BIN
      src/views/userindex/imgs/u=2503372846,402736698&fm=253&fmt=auto&app=120&f=JPEG.webp
  25. BIN
      src/views/userindex/imgs/u=2521003561,2654141216&fm=253&fmt=auto&app=138&f=JPEG.webp
  26. BIN
      src/views/userindex/imgs/u=63249423,2260265143&fm=253&fmt=auto&app=120&f=JPEG.webp
  27. BIN
      src/views/userindex/imgs/u=638285213,1746517464&fm=253&fmt=auto&app=120&f=JPEG.webp
  28. 190 0
      src/views/userindex/indexpage/ArticleIndex.vue
  29. 136 20
      src/views/userindex/indexpage/UserIndex.vue
  30. 157 0
      src/views/userindex/my/MyForward.vue
  31. 123 0
      src/views/userindex/my/MyForwarddetail.vue
  32. 119 0
      src/views/userindex/my/MyIndex.vue

Dosya farkı çok büyük olduğundan ihmal edildi
+ 495 - 37
package-lock.json


+ 4 - 0
package.json
Dosyayı Görüntüle 

@@ -8,11 +8,15 @@
 
     "lint": "vue-cli-service lint"
 
     "lint": "vue-cli-service lint"
 
   },
 
   },
 
   "dependencies": {
 
   "dependencies": {
 
+    "axios": "^1.4.0",
 
     "core-js": "^3.8.3",
 
     "core-js": "^3.8.3",
 
+    "element-ui": "^2.15.13",
 
     "postcss-pxtorem": "^6.0.0",
 
     "postcss-pxtorem": "^6.0.0",
 
+    "quill": "^1.3.7",
 
     "swiper": "^9.4.1",
 
     "swiper": "^9.4.1",
 
     "vant": "^2.12.54",
 
     "vant": "^2.12.54",
 
     "vue": "^2.6.14",
 
     "vue": "^2.6.14",
 
+    "vue-quill-editor": "^3.0.6",
 
     "vue-router": "^3.5.1",
 
     "vue-router": "^3.5.1",
 
     "vuex": "^3.6.2"
 
     "vuex": "^3.6.2"
 
   },
 
   },

+ 21 - 15
public/index.html
Dosyayı Görüntüle 

@@ -1,17 +1,23 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
 <html lang="">
 
 <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>

+ 45 - 0
serves/axios.js
Dosyayı Görüntüle 

@@ -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);
 
+  }
 
+);

+ 13 - 0
serves/prove.js
Dosyayı Görüntüle 

@@ -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}`)

+ 56 - 3
src/App.vue
Dosyayı Görüntüle 

@@ -1,10 +1,39 @@
 
 <template>
 
 <template>
 
   <div id="app">
 
   <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>
 
   </div>
 
 </template>
 
 </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">
 
 <style lang="scss">
 
+// @import url(@/assets/icon/iconfont.css;);
 
+
 
 * {
 
 * {
 
   margin: 0;
 
   margin: 0;
 
   padding: 0;
 
   padding: 0;
 
@@ -13,14 +42,38 @@
 
 html {
 
 html {
 
   width: 100vw;
 
   width: 100vw;
 
   height: 100vh;
 
   height: 100vh;
 
-  font-size: 16px; // 相当于1rem = 10px
 
+  // font-size: 10px; // 相当于1rem = 10px
 
   position: relative;
 
   position: relative;
 
 }
 
 }
 
 
 
 body {
 
 body {
 
   width: 100vw;
 
   width: 100vw;
 
   height: 100vh;
 
   height: 100vh;
 
-  font-size: 16px;
 
+  // font-size: 10px;
 
   position: relative;
 
   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>
 
 </style>

+ 539 - 0
src/assets/icon/demo.css
Dosyayı Görüntüle 

@@ -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;
 
+}

+ 230 - 0
src/assets/icon/demo_index.html
Dosyayı Görüntüle 

@@ -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>

+ 21 - 0
src/assets/icon/iconfont.css
Dosyayı Görüntüle 

@@ -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";
 
+}
 
+

Dosya farkı çok büyük olduğundan ihmal edildi
+ 0 - 0
src/assets/icon/iconfont.js


+ 23 - 0
src/assets/icon/iconfont.json
Dosyayı Görüntüle 

@@ -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
 
+    }
 
+  ]
 
+}

BIN
src/assets/icon/iconfont.ttf
Dosyayı Görüntüle


+ 539 - 0
src/assets/iconfont/demo.css
Dosyayı Görüntüle 

@@ -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;
 
+}

+ 280 - 0
src/assets/iconfont/demo_index.html
Dosyayı Görüntüle 

@@ -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>

+ 31 - 0
src/assets/iconfont/iconfont.css
Dosyayı Görüntüle 

@@ -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";
 
+}
 
+

Dosya farkı çok büyük olduğundan ihmal edildi
+ 0 - 0
src/assets/iconfont/iconfont.js


+ 37 - 0
src/assets/iconfont/iconfont.json
Dosyayı Görüntüle 

@@ -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
 
+    }
 
+  ]
 
+}

BIN
src/assets/iconfont/iconfont.ttf
Dosyayı Görüntüle


BIN
src/assets/iconfont/iconfont.woff
Dosyayı Görüntüle


BIN
src/assets/iconfont/iconfont.woff2
Dosyayı Görüntüle


+ 6 - 2
src/main.js
Dosyayı Görüntüle 

@@ -4,10 +4,14 @@ import router from './router'
 
 import store from './store'
 
 import store from './store'
 
 import '@/util/rem.js'
 
 import '@/util/rem.js'
 
 import 'vant/lib/index.css'; // 引入 Vant 样式
 
 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.config.productionTip = false
 
-
 
+Vue.use(ElementUI);
 
 new Vue({
 
 new Vue({
 
   router,
 
   router,
 
   store,
 
   store,

+ 33 - 7
src/router/index.js
Dosyayı Görüntüle 

@@ -1,6 +1,7 @@
 
 import Vue from 'vue'
 
 import Vue from 'vue'
 
 import VueRouter from 'vue-router'
 
 import VueRouter from 'vue-router'
 
 
 
+
 
 Vue.use(VueRouter)
 
 Vue.use(VueRouter)
 
 
 
 const routes = [
 
 const routes = [
 
@@ -13,14 +14,39 @@ const routes = [
 
   {
 
   {
 
     path: '/index',
 
     path: '/index',
 
     name: '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({
 
 const router = new VueRouter({
 
   mode: 'history',
 
   mode: 'history',

+ 1158 - 33
src/views/Fuzeren/FuzerenView.vue
Dosyayı Görüntüle 

@@ -1,74 +1,1199 @@
 
 <template>
 
 <template>
 
   <div id="FuzeRen">
 
   <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="PersonalInformation">
 
       <!-- 内块 -->
 
       <!-- 内块 -->
 
       <div class="PI-bodyInnerblock">
 
       <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>
 
     </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>
 
   </div>
 
 </template>
 
 </template>
 
-
 
+  
 <script>
 
 <script>
 
+import { Tab, Tabs } from "vant";
 
 export default {
 
 export default {
 
   data () {
 
   data () {
 
     return {
 
     return {
 
       wx_password: "淡忘-zhouzhandui",
 
       wx_password: "淡忘-zhouzhandui",
 
-    }
 
-  },
 
-  methods: {
 
-
 
-  },
 
-  mounted () {
 
-
 
+      xinxipass: "zhouzhandui",
 
+      active: 0,
 
+    };
 
   },
 
   },
 
+  methods: {},
 
+  mounted () { },
 
   components: {
 
   components: {
 
-
 
-  }
 
-}
 
+    Tab, Tabs
 
+  },
 
+};
 
 </script>
 
 </script>
 
-
 
-<style lang="scss">
 
+  
+<style lang="scss" scoped>
 
 #FuzeRen {
 
 #FuzeRen {
 
-  width: 100vw;
 
-  height: 100vh;
 
+  width: 37.5rem;
 
+  //   height: 100%;
 
   background-color: #f2f4f8;
 
   background-color: #f2f4f8;
 
+  box-sizing: border-box;
 
 
 
   .top-color {
 
   .top-color {
 
-    width: 100vw;
 
-    height: 17vh;
 
+    width: 37.5rem;
 
+    height: 10rem;
 
     background-image: linear-gradient(to bottom, #3974c7, #f2f4f8);
 
     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 {
 
   .PersonalInformation {
 
-    width: 95vw;
 
-    height: 23vh;
 
+    width: 35.5rem;
 
+    height: 16rem;
 
     background-color: #fff;
 
     background-color: #fff;
 
-    border-radius: 1vh;
 
+    border-radius: 0.6rem;
 
     position: relative;
 
     position: relative;
 
     z-index: 1;
 
     z-index: 1;
 
-    top: 8vh;
 
+    top: -8vh;
 
     margin: 0 auto;
 
     margin: 0 auto;
 
 
 
     .PI-bodyInnerblock {
 
     .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;
 
       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;
 
           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;
 
+            }
 
+          }
 
         }
 
         }
 
       }
 
       }
 
     }
 
     }

BIN
src/views/userindex/imgs/u=2503372846,402736698&fm=253&fmt=auto&app=120&f=JPEG.webp
Dosyayı Görüntüle


BIN
src/views/userindex/imgs/u=2521003561,2654141216&fm=253&fmt=auto&app=138&f=JPEG.webp
Dosyayı Görüntüle


BIN
src/views/userindex/imgs/u=63249423,2260265143&fm=253&fmt=auto&app=120&f=JPEG.webp
Dosyayı Görüntüle


BIN
src/views/userindex/imgs/u=638285213,1746517464&fm=253&fmt=auto&app=120&f=JPEG.webp
Dosyayı Görüntüle


+ 190 - 0
src/views/userindex/indexpage/ArticleIndex.vue
Dosyayı Görüntüle 

@@ -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>

+ 136 - 20
src/views/userindex/indexpage/UserIndex.vue
Dosyayı Görüntüle 

@@ -1,35 +1,113 @@
 
 <template>
 
 <template>
 
   <div class="indexbox">
 
   <div class="indexbox">
 
     <div class="banner">
 
     <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>
 
       </swipe>
 
     </div>
 
     </div>
 
     <div class="title">
 
     <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>
 
       </tabs>
 
     </div>
 
     </div>
 
+    <div>
 
+
 
+    </div>
 
   </div>
 
   </div>
 
 </template>
 
 </template>
 
 <script>
 
 <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 {
 
 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: {
 
   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>
 
 </script>
 
-<style  lang="scss">
 
+<style>
 
+.van-tabs__wrap {
 
+  height: 3rem !important;
 
+}
 
+
 
+.van-tab {
 
+  line-height: 5rem;
 
+}
 
+</style>
 
+<style scoped  lang="scss">
 
 //swiper
 
 //swiper
 
 .indexbox {
 
 .indexbox {
 
   width: 90vw;
 
   width: 90vw;
 
@@ -38,6 +116,7 @@ export default {
 
   padding-top: 2rem;
 
   padding-top: 2rem;
 
   box-sizing: border-box;
 
   box-sizing: border-box;
 
 
 
+  //轮播图
 
   .banner {
 
   .banner {
 
     width: 100%;
 
     width: 100%;
 
     height: 15rem;
 
     height: 15rem;
 
@@ -67,14 +146,51 @@ export default {
 
     // }
 
     // }
 
   }
 
   }
 
 
 
+  //标签内容
 
   .title {
 
   .title {
 
     padding-top: 2rem;
 
     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%;
 
       }
 
       }
 
     }
 
     }
 
   }
 
   }

+ 157 - 0
src/views/userindex/my/MyForward.vue
Dosyayı Görüntüle 

@@ -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>

+ 123 - 0
src/views/userindex/my/MyForwarddetail.vue
Dosyayı Görüntüle 

@@ -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>

+ 119 - 0
src/views/userindex/my/MyIndex.vue
Dosyayı Görüntüle 

@@ -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>

Bu fark içinde çok fazla dosya değişikliği olduğu için bazı dosyalar gösterilmiyor