h5技术圈修改

pages/user/_id.vue

@@ -3,7 +3,9 @@
     <div alt="back" class="background"></div>
     <div class="userinfo">
       <img :src="info.icon_url" alt class="header-avatar" />
-      <div class="header-nickname">{{info.nickname}}</div>
+      <div class="header-nickname">{{info.nickname}}
+        <div class="tag">客栈主页</div>
+      </div>
       <div class="header-title">{{info.title}}</div>
       <div class="count-infos">
         <div class="info">
@@ -27,7 +29,7 @@
         <div class="panel panel-default">
           <div class="panel-heading-category">
             <div class="m-c-block flex space-between">
-              <div class="heading-category  " :class="{'active':item == 'article'}"  @click="changeitem('article')">
+              <div class="heading-category  " :class="{'active':item == 'article'}" @click="changeitem('article')">
                 <a href="#" title="文章">
                   文章({13})
                 </a>
@@ -52,7 +54,7 @@
             </div>
             <div class="article-list">
               <!-- 有图  -->
-              <div class="article align-center">
+              <div class="article flex">
                 <div class="article-left">
                   <div class="article-title">
                     {独家揭秘：腾讯千亿级参数分布式ML系统无量背后的秘密}
@@ -78,7 +80,10 @@
                     </div>
                   </div>
                 </div>
-                <img class="article-right" src="@/assets/quan/img/1.png">
+                <div class="article-right">
+                  <img src="@/assets/quan/img/1.png">
+                </div>
+
               </div>
 
               <!-- 无图 -->
@@ -111,13 +116,40 @@
           </div>
         </div>
         <div v-if="item == 'video'">
-          <div class="btn-add" style="margin:10px auto">
+          <div class="btn-add" >
             + 添加视频
           </div>
-          <style lang='less' scoped>
+          <div class="video2">
+            <div class="video-box">
+                <div class="video-img">
+                  <img class="img" src="http://local.proginn.com/Public/image_v3/1.png" alt="">
+                  <div class="length">12:35</div>
+                  <img class="play" src="http://local.proginn.com/Public/image_v3/icon/play.png">
+                </div>
+                <div class="video-detail">
+                  <div class="video-des">千亿参数规模的模型已经被业界证明能够有效提高业务效果。如何高效训练出这样的模型</div>
+                  <div class="video-info justify-between">
+                    <div class="live-source align-center">
+                      <img src="<?=STA_URL?>/image/icons/icon_hammer.png">
+                      <div>{微生活}</div>
+                    </div>
+                    <div class="flex">
+                      <div class="live-people gray-51 align-center">
+                        <img class="see icon" src="<?=STA_URL?>/quan_v3/icon/paly_num.png?v=v<?=STA_VERSION?>">
+                        <div>{1280}</div>
+                      </div>
+                      <div class="live-people live-zan gray-51 align-center">
+                        <img class="see icon" src="<?=STA_URL?>/quan_v3/icon/zan.png?v=v<?=STA_VERSION?>">
+                        <div>{345}</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
 
-          </style>
-          <div class="article-list justify-between">
+          <div class="article-list web-video justify-between">
             <div class="video-box">
               <div class="video-img">
                 <img class="img" src="@/assets/quan/img/1.png" alt="">
@@ -178,6 +210,61 @@
             </div>
           </div>
         </div>
+        <div v-if="item == 'heji'">
+          <div class="btn-add" >
+            + 添加合集
+          </div>
+          <div class="article-list">
+            <div class="heji-box align-center justify-between">
+              <div class="heji-left">
+                <img src="@/assets/quan/img/1.png" alt="">
+              </div>
+              <div class="heji-right">
+                <div class="heji-title">
+                  独家揭秘：腾讯千亿级参数分布式ML系统无量背后的秘密
+                </div>
+                <div class="gray-153 heji-con">
+                  千亿参数规模的模型已经被业界证明能够有效提高业务效果。如何高效训练出这样的模型？百 GB 级别的模型如何在线上实现毫秒级的响应？
+                </div>
+                <div class="heji-other justify-between align-center">
+                  <div class="heji-pusher  align-center">
+                    <img class="heji-logo"  src="@/assets/quan/img/1.png"></img>
+                    <div class="heji-username" >test</div>
+                  </div>
+                  <div class="heji-other flex">
+                    <div>文章(12)</div>
+                    <div style="color:rgb(200,200,200);margin:0 15px">|</div>
+                    <div>视频(34)</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="heji-box align-center justify-between">
+              <div class="heji-left">
+                <img src="@/assets/quan/img/1.png" alt="">
+              </div>
+              <div class="heji-right">
+                <div class="heji-title">
+                  独家揭秘：腾讯千亿级参数分布式ML系统无量背后的秘密
+                </div>
+                <div class="gray-153 heji-con">
+                  千亿参数规模的模型已经被业界证明能够有效提高业务效果。如何高效训练出这样的模型？百 GB 级别的模型如何在线上实现毫秒级的响应？
+                </div>
+                <div class="heji-other justify-between align-center">
+                  <div class="heji-pusher  align-center">
+                    <img class="heji-logo"  src="@/assets/quan/img/1.png"></img>
+                    <div class="heji-username" >test</div>
+                  </div>
+                  <div class="heji-other flex">
+                    <div>文章(12)</div>
+                    <div style="color:rgb(200,200,200);margin:0 15px">|</div>
+                    <div>视频(34)</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
         <!-- <div class="arts-title">
           一共
           <span style="color: var(--mainColor);">{{idInfo.topics_count}}</span> 篇文章
@@ -278,7 +365,7 @@
         isLoading: false,
         noMore: false,
         idInfo: {},
-        item:'article'
+        item: 'heji'
       };
     },
     computed: {
@@ -294,7 +381,7 @@
       this.getDetail();
     },
     methods: {
-      changeitem(x){
+      changeitem(x) {
         this.item = x
       },
       async getDetail() {
@@ -466,6 +553,71 @@
 
 <style lang='less' scoped>
   @max768: ~"(max-width: 768px)";
+  .heji-box{
+    padding:30px 0;
+    border-bottom:1px solid rgb(230,230,230) ;
+    box-shadow:0px 0px 0px 0px rgba(0,0,0,0.1);
+  }
+  .heji-other{
+    font-size:12px;
+    font-weight:500;
+    color:rgba(102,102,102,1);
+    line-height:17px;
+  }
+  .heji-logo{
+    width:24px;
+    height:24px;
+    border-radius:12px;
+    margin-right: 7px;
+  }
+  .heji-username{
+    font-size:12px;
+    font-weight:500;
+    color:rgba(34,34,34,1);
+    line-height:17px;
+  }
+  .heji-left>img{
+    width:154px;
+    height:114px;
+    object-fit: cover;
+    margin-right:10px;
+  }
+  .heji-right{
+    padding:5px 0;
+    width:537px;
+  }
+  .heji-height{
+    color:rgba(17,17,17,1);
+    line-height:25px;
+    font-size: 18px;
+  }
+  .heji-con{
+    font-size:13px;
+    font-family:PingFangSC-Regular,PingFang SC;
+    font-weight:400;
+    color:rgba(153,153,153,1);
+    line-height:18px;
+    margin-bottom:20px;
+    margin-top: 10px;
+   }
+  .header-nickname{
+
+    position: relative;
+  }
+  .tag{
+    width:59px;
+    position: absolute;
+    right:-66px;
+    top:0px;
+    height:21px;
+    background:rgba(255,181,60,1);
+    border-radius:2px;
+    font-size:12px;
+    font-weight:600;
+    color:rgba(255,255,255,1);
+    line-height:21px;
+    text-align: center;
+  }
   .video-box {
     margin-bottom: 20px;
     padding-bottom: 20px;
@@ -524,21 +676,25 @@
     font-size: 12px;
     margin-top: 12px;
   }
-  .video-detail{
-    padding:0 10px;
-    padding-bottom:20px;
-    box-shadow:0px 3px 12px 0px rgba(8,27,50,0.05);
-    border-radius:0px 0px 4px 4px;
-    border:1px solid rgba(0,0,0,0.03)
+
+  .video-detail {
+    padding: 0 10px;
+    padding-bottom: 20px;
+    box-shadow: 0px 3px 12px 0px rgba(8, 27, 50, 0.05);
+    border-radius: 0px 0px 4px 4px;
+    border: 1px solid rgba(0, 0, 0, 0.03)
   }
-  .video-other-box{
-    margin-right:10px;
+
+  .video-other-box {
+    margin-right: 10px;
 
   }
-  .video-push-time{
-    padding:0 5px;
-    border-left: 1px solid rgba(153, 153, 153, 1) ;
+
+  .video-push-time {
+    padding: 0 5px;
+    border-left: 1px solid rgba(153, 153, 153, 1);
   }
+
   hr {
     margin-bottom: 20px;
     height: 1px;
@@ -565,7 +721,7 @@
   }
 
   .article-list {
-    width: 738px;
+    width: 700px;
     margin: 0 auto;
   }
 
@@ -845,8 +1001,169 @@
     padding-bottom: 10px;
     border-bottom: 1px solid #f2f2f2;
   }
-
+  .btn-add{
+    margin:20px 0;
+  }
   @media @max768 {
+    .heji-title{
+          text-align: left;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+    }
+    .heji-con{
+      text-align: left;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .heji-left{
+      width:29%;
+    }
+    .heji-left>img{
+      width: 100%;
+      height:auto;
+      border-radius:1%;
+    }
+    .heji-right{
+      width:64%;
+    }
+    .web-video{
+      display: none;
+    }
+    .video2{
+      margin-top:0.36rem;
+      width:100%;
+    	overflow: hidden;
+    }
+    .video-box{
+
+    	overflow: hidden;
+    }
+    .video-img{
+    	position: relative;
+    	width:100%;
+    	height:4rem;
+    }
+    .video-img .img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    	border-radius:0.08rem 0.08rem 0rem 0rem;
+
+    }
+    .video-des{
+    	font-size:0.31rem;
+    	font-family:PingFangSC-Regular,PingFang SC;
+    	color:rgba(51,51,51,1);
+    	line-height:0.4rem;
+    	margin:0.21rem 0 0.22rem 0;
+    }
+    .video-detail{
+    	padding:0.21rem 0.31rem;
+    	box-shadow:0rem 0.06rem 0.25rem 0rem rgba(8,27,50,0.05);
+    	border-radius:0rem 0rem 0.08rem 0.08rem;
+    }
+    .length {
+      position: absolute;
+      right: 10px;
+      bottom: 10px;
+      line-height: 22px;
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 11px;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      padding: 0 22px;
+      color:white;
+    }
+    .play{
+      position: absolute;
+      width:0.91rem !important;
+      height:0.91rem;
+      top:1.5rem;
+      left:3.2rem;
+    }
+    .live-zan{
+    	margin-left: 0.25rem;
+    }
+    .article-left{
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+    .source{
+      justify-content: space-between;
+      margin-top: 0.16rem;
+    }
+    .live-source >img{
+      width:0.36rem;
+      height:0.36rem;
+    }
+    .live-time{
+      border:0;
+      padding: 0;
+
+    }
+    .live-people{
+      padding:0
+    }
+    .article-desc{
+      display: none;
+    }
+    .article-title{
+      font-size:0.3rem;
+      line-height:0.42rem;
+    }
+    .article-right{
+      width:29%;
+    }
+    .article-left{
+      width:69%;
+      margin-right:2%;
+    }
+    .article-list{
+      width:100%;
+    }
+    .article{
+      padding:0.38rem 0 0.4rem 0;
+    }
+    .content-box{
+      padding:0 0.18rem;
+      background-color: white;
+    }
+    .btn-add{
+      color:rgba(48, 142, 255, 1);
+      width:100%;
+      height:0.8rem;
+      line-height: 0.8rem;
+      background:rgba(48,142,255,0.1);
+      border-radius:0.08rem;
+      margin:0 auto;
+    }
+    .panel{
+      width:100%;
+    }
+    hr{
+      margin-bottom:10px;
+    }
+    .m-c-block{
+      width:100%;
+      line-height:0.9rem;
+      display: flex;
+      justify-content: space-around;
+    }
+    .background{
+      height:4rem;
+    }
+    button.focu-btn{
+      display: none ;
+    }
+    div.userinfo{
+      height: 3rem !important;
+    }
     .community-u {
       width: 100%;
       margin-bottom: 0;

pages/user/add_article_collect.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="box">
+    <div class="top">
+      <div class="left">
+        合集:消息中台
+      </div>
+      <div class="right">
+        <van-icon name="replay" />
+        刷新
+      </div>
+    </div>
+    <form action="">
+      <van-checkbox  bind:change="onChange" v-model="checked">全选</van-checkbox>
+      <van-checkbox-group>
+        <van-checkbox value="2"  bind:change="onChange">
+          <div class="article align-center">
+            <div class="article-left">
+              <div class="article-title">
+                {独家揭秘：腾讯千亿级参数分布式ML系统无量背后的秘密}
+              </div>
+              <div class="article-desc">
+                {千亿参数规模的模型已经被业界证明能够有效提高业务效果。如何高效训练出这样的模型？百 GB 级别的模型如何在线上实现毫秒级的响应？}
+              </div>
+              <div class="source align-center">
+                <div class="live-source align-center">
+                  <img src="@/assets/quan/icon/icon_hammer.png">
+                  <div>{微生活}</div>
+                </div>
+                <div class="live-time gray-153">
+                  <div>{3小时前}</div>
+                </div>
+                <div class="live-time gray-153 align-center">
+                  <img class="icon" src="@/assets/quan/icon/zan.png">
+                  <div>{1230}</div>
+                </div>
+                <div class="live-people gray-153 align-center">
+                  <img class="icon" src="@/assets/quan/icon/common.png">
+                  <div>{1280}</div>
+                </div>
+              </div>
+            </div>
+            <img class="article-right" src="@/assets/quan/img/1.png">
+          </div>
+        </van-checkbox>
+        <van-checkbox value="1" bind:change="onChange">
+          <div class="article">
+            <div class="article-title">
+              {独家揭秘：腾讯千亿级参数分布式ML系统无量背后的秘密}
+            </div>
+            <div class="article-desc">
+              {千亿参数规模的模型已经被业界证明能够有效提高业务效果。如何高效训练出这样的模型？百 GB 级别的模型如何在线上实现毫秒级的响应？}
+            </div>
+            <div class="source align-center">
+              <div class="live-source align-center">
+                <img src="@/assets/quan/icon/icon_hammer.png">
+                <div>{微生活}</div>
+              </div>
+              <div class="live-time gray-153">
+                <div>{3小时前}</div>
+              </div>
+              <div class="live-people gray-153 align-center">
+                <img class="icon" src="@/assets/quan/icon/zan.png">
+                <div>{1230}</div>
+              </div>
+              <div class="live-people gray-153 align-center">
+                <img class="icon" src="@/assets/quan/icon/common.png">
+                <div>{1280}</div>
+              </div>
+            </div>
+          </div>
+        </van-checkbox>
+      </van-checkbox-group>
+    </form>
+
+
+  </div>
+
+</template>
+<script>
+  import "@/assets/css/common.css"
+  import WxMixin from "@/mixins/wx";
+  import Vue from 'vue';
+  import {
+    Form
+  } from 'vant';
+  import {
+    Icon
+  } from 'vant';
+  import {
+    Checkbox,
+    CheckboxGroup
+  } from 'vant';
+
+  let container;
+  let page = 1;
+
+  export default {
+    layout: "opacity_header",
+    async asyncData({
+      $axios,
+      params,
+      req
+    }) {
+      let id = params.id;
+      let headers = req && req.headers;
+      let res = await $axios.$get(
+        `/api/user/getUserInfo?id=${id}&page=1&size=10`, {
+          headers
+        }
+      );
+      if (!res.data) {
+        return {
+          title: "的技术圈主页-程序员客栈"
+        };
+      }
+      return {
+        title: `${res.data.info.nickname}的技术圈主页-程序员客栈`
+      };
+    },
+    head() {
+      return {
+        title: this.title,
+        script: [{
+            src: "https://res.wx.qq.com/open/js/jweixin-1.2.0.js"
+          },
+          {
+            src: "https://hm.baidu.com/hm.js?18455f493c982100e5a82ec978a8d06e"
+          }
+        ]
+      };
+    },
+    mixins: [WxMixin],
+    data() {
+      return {
+        checked:true
+      };
+    },
+    computed: {
+      info() {
+        return this.idInfo.info || {};
+      },
+      arts() {
+        return this.idInfo.topics || [];
+      }
+    },
+    mounted() {
+      container = this.$refs.container;
+      // this.getDetail();
+    },
+    methods: {
+      onChange(){
+        console.log(1)
+      },
+      /**
+       * 监听滚动
+       */
+      containerScroll() {
+        if (this.isLoading || this.noMore) return;
+        // PC不监听
+        if (this.$store.state.isPC) return;
+        if (
+          container.scrollHeight - container.scrollTop - container.clientHeight <
+          50
+        ) {
+          this.currentPage++;
+          this.getList();
+        }
+      }
+    },
+    created() {
+      this.baseUrl = this.$store.state.domainConfig.siteUrl;
+      this.jishuBaseUrl = this.$store.state.domainConfig.jishuinUrl;
+    }
+  };
+</script>
+<style>
+  body {
+    background-color: white;
+  }
+
+  form {
+    padding: 0.4rem 2.5%;
+  }
+
+  .main {
+    margin: 0;
+  }
+
+  .live-zan {
+    margin-left: 0.25rem;
+  }
+
+  .article-left {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .source {
+    justify-content: space-between;
+    margin-top: 0.16rem;
+    font-size: 0.22rem;
+  }
+
+  .live-source>img {
+    width: 0.36rem;
+    height: 0.36rem;
+  }
+
+  .live-time {
+    border: 0;
+    padding: 0;
+
+  }
+
+  .live-people {
+    padding: 0
+  }
+
+  .article-desc {
+    display: none;
+  }
+
+  .article-title {
+    font-size: 0.3rem;
+    line-height: 0.42rem;
+  }
+
+  .article-right {
+    width: 29%;
+  }
+
+  .article-left {
+    width: 69%;
+    margin-right: 2%;
+  }
+
+  .article-list {
+    width: 100%;
+  }
+
+  .article {
+    padding: 0.38rem 0 0.4rem 0;
+    width: 100%;
+    border-bottom: 1px solid rgb(0, 0, 0, 0.06)
+  }
+</style>
+<style lang='less' scoped>
+  .box {
+    width: 100%;
+
+    .top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.22rem 0.18rem;
+      border-bottom: 1px solid rgba(241, 241, 241, 1);
+
+      .left {
+        font-size: 0.32rem;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: rgba(34, 34, 34, 1);
+        line-height: 0.44rem;
+        padding-left: 0.1rem;
+        border-left: 0.06rem solid rgba(48, 142, 255, 1);
+        ;
+      }
+    }
+
+
+
+  }
+</style>

pages/user/add_video_collect.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="box">
+    <div class="top">
+      <div class="left">
+        合集:消息中台
+      </div>
+      <div class="right">
+        <van-icon name="replay" />
+        刷新
+      </div>
+    </div>
+    <form action="">
+      <van-checkbox  bind:change="onChange" v-model="checked">全选</van-checkbox>
+      <van-checkbox-group>
+        <van-checkbox value="2"  bind:change="onChange">
+          <div class="article align-center">
+            <div class="article-left">
+              <div class="article-title">
+                {独家揭秘：腾讯千亿级参数分布式ML系统无量背后的秘密}
+              </div>
+              <div class="article-desc">
+                {千亿参数规模的模型已经被业界证明能够有效提高业务效果。如何高效训练出这样的模型？百 GB 级别的模型如何在线上实现毫秒级的响应？}
+              </div>
+              <div class="source align-center">
+                <div class="live-source align-center">
+                  <img src="@/assets/quan/icon/icon_hammer.png">
+                  <div>{微生活}</div>
+                </div>
+                <div class="live-time gray-153">
+                  <div>{3小时前}</div>
+                </div>
+                <div class="live-time gray-153 align-center">
+                  <img class="icon" src="@/assets/quan/icon/zan.png">
+                  <div>{1230}</div>
+                </div>
+                <div class="live-people gray-153 align-center">
+                  <img class="icon" src="@/assets/quan/icon/common.png">
+                  <div>{1280}</div>
+                </div>
+              </div>
+            </div>
+            <img class="article-right" src="@/assets/quan/img/1.png">
+          </div>
+        </van-checkbox>
+        <van-checkbox value="1" bind:change="onChange">
+          <div class="article">
+            <div class="article-title">
+              {独家揭秘：腾讯千亿级参数分布式ML系统无量背后的秘密}
+            </div>
+            <div class="article-desc">
+              {千亿参数规模的模型已经被业界证明能够有效提高业务效果。如何高效训练出这样的模型？百 GB 级别的模型如何在线上实现毫秒级的响应？}
+            </div>
+            <div class="source align-center">
+              <div class="live-source align-center">
+                <img src="@/assets/quan/icon/icon_hammer.png">
+                <div>{微生活}</div>
+              </div>
+              <div class="live-time gray-153">
+                <div>{3小时前}</div>
+              </div>
+              <div class="live-people gray-153 align-center">
+                <img class="icon" src="@/assets/quan/icon/zan.png">
+                <div>{1230}</div>
+              </div>
+              <div class="live-people gray-153 align-center">
+                <img class="icon" src="@/assets/quan/icon/common.png">
+                <div>{1280}</div>
+              </div>
+            </div>
+          </div>
+        </van-checkbox>
+      </van-checkbox-group>
+    </form>
+
+
+  </div>
+
+</template>
+<script>
+  import "@/assets/css/common.css"
+  import WxMixin from "@/mixins/wx";
+  import Vue from 'vue';
+  import {
+    Form
+  } from 'vant';
+  import {
+    Icon
+  } from 'vant';
+  import {
+    Checkbox,
+    CheckboxGroup
+  } from 'vant';
+
+  let container;
+  let page = 1;
+
+  export default {
+    layout: "opacity_header",
+    async asyncData({
+      $axios,
+      params,
+      req
+    }) {
+      let id = params.id;
+      let headers = req && req.headers;
+      let res = await $axios.$get(
+        `/api/user/getUserInfo?id=${id}&page=1&size=10`, {
+          headers
+        }
+      );
+      if (!res.data) {
+        return {
+          title: "的技术圈主页-程序员客栈"
+        };
+      }
+      return {
+        title: `${res.data.info.nickname}的技术圈主页-程序员客栈`
+      };
+    },
+    head() {
+      return {
+        title: this.title,
+        script: [{
+            src: "https://res.wx.qq.com/open/js/jweixin-1.2.0.js"
+          },
+          {
+            src: "https://hm.baidu.com/hm.js?18455f493c982100e5a82ec978a8d06e"
+          }
+        ]
+      };
+    },
+    mixins: [WxMixin],
+    data() {
+      return {
+        checked:true
+      };
+    },
+    computed: {
+      info() {
+        return this.idInfo.info || {};
+      },
+      arts() {
+        return this.idInfo.topics || [];
+      }
+    },
+    mounted() {
+      container = this.$refs.container;
+      // this.getDetail();
+    },
+    methods: {
+      onChange(){
+        console.log(1)
+      },
+      /**
+       * 监听滚动
+       */
+      containerScroll() {
+        if (this.isLoading || this.noMore) return;
+        // PC不监听
+        if (this.$store.state.isPC) return;
+        if (
+          container.scrollHeight - container.scrollTop - container.clientHeight <
+          50
+        ) {
+          this.currentPage++;
+          this.getList();
+        }
+      }
+    },
+    created() {
+      this.baseUrl = this.$store.state.domainConfig.siteUrl;
+      this.jishuBaseUrl = this.$store.state.domainConfig.jishuinUrl;
+    }
+  };
+</script>
+<style>
+  body {
+    background-color: white;
+  }
+
+  form {
+    padding: 0.4rem 2.5%;
+  }
+
+  .main {
+    margin: 0;
+  }
+
+  .live-zan {
+    margin-left: 0.25rem;
+  }
+
+  .article-left {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .source {
+    justify-content: space-between;
+    margin-top: 0.16rem;
+    font-size: 0.22rem;
+  }
+
+  .live-source>img {
+    width: 0.36rem;
+    height: 0.36rem;
+  }
+
+  .live-time {
+    border: 0;
+    padding: 0;
+
+  }
+
+  .live-people {
+    padding: 0
+  }
+
+  .article-desc {
+    display: none;
+  }
+
+  .article-title {
+    font-size: 0.3rem;
+    line-height: 0.42rem;
+  }
+
+  .article-right {
+    width: 29%;
+  }
+
+  .article-left {
+    width: 69%;
+    margin-right: 2%;
+  }
+
+  .article-list {
+    width: 100%;
+  }
+
+  .article {
+    padding: 0.38rem 0 0.4rem 0;
+    width: 100%;
+    border-bottom: 1px solid rgb(0, 0, 0, 0.06)
+  }
+</style>
+<style lang='less' scoped>
+  .box {
+    width: 100%;
+
+    .top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.22rem 0.18rem;
+      border-bottom: 1px solid rgba(241, 241, 241, 1);
+
+      .left {
+        font-size: 0.32rem;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: rgba(34, 34, 34, 1);
+        line-height: 0.44rem;
+        padding-left: 0.1rem;
+        border-left: 0.06rem solid rgba(48, 142, 255, 1);
+        ;
+      }
+    }
+
+
+
+  }
+</style>

pages/user/new_article.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="box">
+    <img src="~@/assets/quan/icon/tip.png" alt="">
+    <div class="tip">请前往web端新建文章</div>
+    <div class="link">
+      https://www.proginn.com/ABC
+      <span>复制</span>
+    </div>
+    <div class="btn">我知道了</div>
+  </div>
+</template>
+<script>
+  import WxMixin from "@/mixins/wx";
+
+  let container;
+  let page = 1;
+
+  export default {
+    layout: "opacity_header",
+    async asyncData({
+      $axios,
+      params,
+      req
+    }) {
+      let id = params.id;
+      let headers = req && req.headers;
+      let res = await $axios.$get(
+        `/api/user/getUserInfo?id=${id}&page=1&size=10`, {
+          headers
+        }
+      );
+      if (!res.data) {
+        return {
+          title: "的技术圈主页-程序员客栈"
+        };
+      }
+      return {
+        title: `${res.data.info.nickname}的技术圈主页-程序员客栈`
+      };
+    },
+    head() {
+      return {
+        title: this.title,
+        script: [{
+            src: "https://res.wx.qq.com/open/js/jweixin-1.2.0.js"
+          },
+          {
+            src: "https://hm.baidu.com/hm.js?18455f493c982100e5a82ec978a8d06e"
+          }
+        ]
+      };
+    },
+    mixins: [WxMixin],
+    data() {
+      return {
+        collect_title:'方案名称',
+        collect_des:'解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介',
+        company_info:{
+          img:'',
+          name:'公司的名字'
+        },
+        baseUrl: "",
+        jishuBaseUrl: "",
+        list: [],
+        currentPage: 1,
+        isLoading: false,
+        noMore: false,
+        idInfo: {},
+        item: 'heji'
+      };
+    },
+    computed: {
+      info() {
+        return this.idInfo.info || {};
+      },
+      arts() {
+        return this.idInfo.topics || [];
+      }
+    },
+    mounted() {
+      container = this.$refs.container;
+      this.getDetail();
+    },
+    methods: {
+      changeitem(x) {
+        this.item = x
+      },
+      async getDetail() {
+        let res = await this.$axios.$get(
+          `/api/user/getUserInfo?id=${this.$route.params.id}&page=1&size=10`
+        );
+        // console.log(res.data)
+        if (res.data) {
+          document.title = `${res.data.info.nickname}的技术圈主页-程序员客栈`;
+          this.idInfo = res.data;
+        }
+      },
+      async handleDelete(topic) {
+        console.log(topic);
+        await this.needLogin();
+        if (!this.idInfo.has_edit_delete_access) {
+          this.$message.error("你没有该文章的操作权限");
+        }
+        this.$confirm(`<p>确认删除该文章吗？</p>`, "提示", {
+            dangerouslyUseHTMLString: true
+          })
+          .then(async () => {
+            this.$axios
+              .$post("/api/community/topic/delete", {
+                topic_id: topic.id
+              })
+              .then(() => {
+                this.$message({
+                  message: "删除成功",
+                  type: "success"
+                });
+                this.getDetail();
+              })
+              .catch(() => {
+                this.$message.error("该文章不存在");
+                setTimeout(() => location.reload(), 1000);
+              });
+          })
+          .catch(err => {
+            console.log("cancel");
+          });
+      },
+      clickLancer({
+        id
+      }) {
+        this.$router.push(baseUrl + `/cert/type/${id}`);
+      },
+      btnDisabled(item) {
+        return item.btn_name !== "申请认证" || !item.can_click;
+      },
+      async getList() {
+        let id = this.$route.params.id;
+        this.isLoading = true;
+        // console.log(id)
+        let res = await this.$axios.$get(
+          `/api/user/getUserInfo?id=${id}&page=${this.currentPage}&size=10`, {}, {
+            neverLogout: true
+          }
+        );
+        this.isLoading = false;
+        if (res) {
+          if (this.currentPage === 1 || this.$store.state.isPC) {
+            this.idInfo = res.data;
+          } else {
+            if (!res.data.topics.length) {
+              this.noMore = true;
+              return;
+            }
+            this.idInfo.topics = [...this.idInfo.topics, ...res.data.topics];
+          }
+        }
+      },
+      canApply(item) {
+        return item.end_date && item.is_cert_validate && item.cert_no;
+      },
+      configWx() {
+        try {
+          let conf = this.$store.state.wxConfig;
+          wx.ready(function() {
+            //需在用户可能点击分享按钮前就先调用
+            wx.config({
+              debug: true,
+              appId: conf.appId,
+              timestamp: conf.timestamp,
+              nonceStr: conf.nonceStr,
+              signature: conf.signature,
+              jsApiList: [
+                // 所有要调用的 API 都要加到这个列表中
+                "onMenuShareTimeline", // 分享到朋友圈接口
+                "onMenuShareAppMessage", //  分享到朋友接口
+                "onMenuShareQQ", // 分享到QQ接口
+                "onMenuShareWeibo" // 分享到微博接口
+              ],
+              success: function() {
+                alert("wx.config ok");
+              },
+              error: function(d) {
+                alert("wx.config err:" + JSON.stringify(d));
+              }
+            });
+            wx.updateAppMessageShareData({
+              title: "开发者资质认证", // 分享标题
+              desc: "通过平台审核、认证，将获得更多接单机会", // 分享描述
+              link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+              imgUrl: "https://stacdn.proginn.com/favicon.ico", // 分享图标
+              success: function() {
+                // 设置成功
+                alert("微信图标设置成功");
+              }
+            });
+          });
+        } catch (error) {
+          // alert(error);
+        }
+      },
+      /**
+       * 修改页码
+       */
+      changePagination(page) {
+        this.currentPage = page;
+        this.getList();
+      },
+      /**
+       * 点击关注按钮
+       */
+      async doFollow() {
+        // 移动端处理
+        if (!this.$store.state.isPC && !this.$store.getters.isLogin) {
+          location.href = "proginn://login";
+          return;
+        }
+        let res = await this.$axios.$post(`/api/user/follow`, {
+          follow_id: this.$route.params.id
+        });
+        if (res && res.data) {
+          this.idInfo.has_follow = res.data.follow_status ? 1 : 0;
+        } else {
+          this.goLogin(1, true);
+        }
+      },
+      /**
+       * 点击文章
+       */
+      clickArt(art, index) {
+        location.href = `/p/${art.id}.html`;
+      },
+      /**
+       * 监听滚动
+       */
+      containerScroll() {
+        if (this.isLoading || this.noMore) return;
+        // PC不监听
+        if (this.$store.state.isPC) return;
+        if (
+          container.scrollHeight - container.scrollTop - container.clientHeight <
+          50
+        ) {
+          this.currentPage++;
+          this.getList();
+        }
+      }
+    },
+    created() {
+      this.baseUrl = this.$store.state.domainConfig.siteUrl;
+      this.jishuBaseUrl = this.$store.state.domainConfig.jishuinUrl;
+    }
+  };
+</script>
+<style>
+  body{
+    background-color: white;
+  }
+</style>
+<style lang='less' scoped>
+  .box{
+    margin-top:25vh;
+    display:flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .btn{
+    width:2.8rem;
+    height:0.8rem;
+    background:rgba(48,142,255,1);
+    box-shadow:0rem 0.04rem 0.12rem 0rem rgba(48,142,255,0.3);
+    border-radius:0.04rem;
+    line-height: 0.8rem;
+    text-align: center;
+    font-size:0.28rem;
+    font-family:PingFangSC-Medium,PingFang SC;
+    font-weight:500;
+    color:rgba(255,255,255,1);
+    margin-top:0.64rem;
+  }
+  .link>span{
+    font-size:0.24rem;
+    font-family:PingFangSC-Medium,PingFang SC;
+    font-weight:500;
+    color:rgba(48,142,255,1);
+  }
+  .link{
+    font-size:0.26rem;
+    font-family:PingFangSC-Regular,PingFang SC;
+    font-weight:400;
+    color:rgba(146,154,164,1);
+    line-height:0.36rem;
+  }
+  .tip{
+    font-size:0.3rem;
+    font-family:PingFangSC-Regular,PingFang SC;
+    font-weight:400;
+    color:rgba(44,52,62,1);
+    line-height:0.51rem;
+    margin-top: 0.36rem;
+    margin-bottom: 0.07rem;
+  }
+  img{
+      width:3.28rem;
+      height:2.7rem;
+  }
+</style>

pages/user/select_new.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="flex">
+    <div class="box">
+      <div class="item">
+        <img src="~@/assets/quan/icon/new_article.png" alt="">
+        <div>投稿文章</div>
+      </div>
+      <div class="item">
+        <img src="~@/assets/quan/icon/new_video.png" alt="">
+        <div>投稿视频</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import WxMixin from "@/mixins/wx";
+
+  let container;
+  let page = 1;
+
+  export default {
+    layout: "opacity_header",
+    async asyncData({
+      $axios,
+      params,
+      req
+    }) {
+      let id = params.id;
+      let headers = req && req.headers;
+      let res = await $axios.$get(
+        `/api/user/getUserInfo?id=${id}&page=1&size=10`, {
+          headers
+        }
+      );
+      if (!res.data) {
+        return {
+          title: "的技术圈主页-程序员客栈"
+        };
+      }
+      return {
+        title: `${res.data.info.nickname}的技术圈主页-程序员客栈`
+      };
+    },
+    head() {
+      return {
+        title: this.title,
+        script: [{
+            src: "https://res.wx.qq.com/open/js/jweixin-1.2.0.js"
+          },
+          {
+            src: "https://hm.baidu.com/hm.js?18455f493c982100e5a82ec978a8d06e"
+          }
+        ]
+      };
+    },
+    mixins: [WxMixin],
+    data() {
+      return {
+        collect_title:'方案名称',
+        collect_des:'解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介',
+        company_info:{
+          img:'',
+          name:'公司的名字'
+        },
+        baseUrl: "",
+        jishuBaseUrl: "",
+        list: [],
+        currentPage: 1,
+        isLoading: false,
+        noMore: false,
+        idInfo: {},
+        item: 'heji'
+      };
+    },
+    computed: {
+      info() {
+        return this.idInfo.info || {};
+      },
+      arts() {
+        return this.idInfo.topics || [];
+      }
+    },
+    mounted() {
+      container = this.$refs.container;
+      this.getDetail();
+    },
+    methods: {
+      changeitem(x) {
+        this.item = x
+      },
+      async getDetail() {
+        let res = await this.$axios.$get(
+          `/api/user/getUserInfo?id=${this.$route.params.id}&page=1&size=10`
+        );
+        // console.log(res.data)
+        if (res.data) {
+          document.title = `${res.data.info.nickname}的技术圈主页-程序员客栈`;
+          this.idInfo = res.data;
+        }
+      },
+      async handleDelete(topic) {
+        console.log(topic);
+        await this.needLogin();
+        if (!this.idInfo.has_edit_delete_access) {
+          this.$message.error("你没有该文章的操作权限");
+        }
+        this.$confirm(`<p>确认删除该文章吗？</p>`, "提示", {
+            dangerouslyUseHTMLString: true
+          })
+          .then(async () => {
+            this.$axios
+              .$post("/api/community/topic/delete", {
+                topic_id: topic.id
+              })
+              .then(() => {
+                this.$message({
+                  message: "删除成功",
+                  type: "success"
+                });
+                this.getDetail();
+              })
+              .catch(() => {
+                this.$message.error("该文章不存在");
+                setTimeout(() => location.reload(), 1000);
+              });
+          })
+          .catch(err => {
+            console.log("cancel");
+          });
+      },
+      clickLancer({
+        id
+      }) {
+        this.$router.push(baseUrl + `/cert/type/${id}`);
+      },
+      btnDisabled(item) {
+        return item.btn_name !== "申请认证" || !item.can_click;
+      },
+      async getList() {
+        let id = this.$route.params.id;
+        this.isLoading = true;
+        // console.log(id)
+        let res = await this.$axios.$get(
+          `/api/user/getUserInfo?id=${id}&page=${this.currentPage}&size=10`, {}, {
+            neverLogout: true
+          }
+        );
+        this.isLoading = false;
+        if (res) {
+          if (this.currentPage === 1 || this.$store.state.isPC) {
+            this.idInfo = res.data;
+          } else {
+            if (!res.data.topics.length) {
+              this.noMore = true;
+              return;
+            }
+            this.idInfo.topics = [...this.idInfo.topics, ...res.data.topics];
+          }
+        }
+      },
+      canApply(item) {
+        return item.end_date && item.is_cert_validate && item.cert_no;
+      },
+      configWx() {
+        try {
+          let conf = this.$store.state.wxConfig;
+          wx.ready(function() {
+            //需在用户可能点击分享按钮前就先调用
+            wx.config({
+              debug: true,
+              appId: conf.appId,
+              timestamp: conf.timestamp,
+              nonceStr: conf.nonceStr,
+              signature: conf.signature,
+              jsApiList: [
+                // 所有要调用的 API 都要加到这个列表中
+                "onMenuShareTimeline", // 分享到朋友圈接口
+                "onMenuShareAppMessage", //  分享到朋友接口
+                "onMenuShareQQ", // 分享到QQ接口
+                "onMenuShareWeibo" // 分享到微博接口
+              ],
+              success: function() {
+                alert("wx.config ok");
+              },
+              error: function(d) {
+                alert("wx.config err:" + JSON.stringify(d));
+              }
+            });
+            wx.updateAppMessageShareData({
+              title: "开发者资质认证", // 分享标题
+              desc: "通过平台审核、认证，将获得更多接单机会", // 分享描述
+              link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+              imgUrl: "https://stacdn.proginn.com/favicon.ico", // 分享图标
+              success: function() {
+                // 设置成功
+                alert("微信图标设置成功");
+              }
+            });
+          });
+        } catch (error) {
+          // alert(error);
+        }
+      },
+      /**
+       * 修改页码
+       */
+      changePagination(page) {
+        this.currentPage = page;
+        this.getList();
+      },
+      /**
+       * 点击关注按钮
+       */
+      async doFollow() {
+        // 移动端处理
+        if (!this.$store.state.isPC && !this.$store.getters.isLogin) {
+          location.href = "proginn://login";
+          return;
+        }
+        let res = await this.$axios.$post(`/api/user/follow`, {
+          follow_id: this.$route.params.id
+        });
+        if (res && res.data) {
+          this.idInfo.has_follow = res.data.follow_status ? 1 : 0;
+        } else {
+          this.goLogin(1, true);
+        }
+      },
+      /**
+       * 点击文章
+       */
+      clickArt(art, index) {
+        location.href = `/p/${art.id}.html`;
+      },
+      /**
+       * 监听滚动
+       */
+      containerScroll() {
+        if (this.isLoading || this.noMore) return;
+        // PC不监听
+        if (this.$store.state.isPC) return;
+        if (
+          container.scrollHeight - container.scrollTop - container.clientHeight <
+          50
+        ) {
+          this.currentPage++;
+          this.getList();
+        }
+      }
+    },
+    created() {
+      this.baseUrl = this.$store.state.domainConfig.siteUrl;
+      this.jishuBaseUrl = this.$store.state.domainConfig.jishuinUrl;
+    }
+  };
+</script>
+<style>
+  body{
+    background-color: white;
+  }
+</style>
+<style lang='less' scoped>
+ .flex{
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+  .item{
+    text-align: center;
+    font-size:0.3rem;
+    font-family:PingFangSC-Semibold,PingFang SC;
+    font-weight:600;
+    color:rgba(34,34,34,1);
+    line-height:0.35rem;
+  }
+  .box{
+    height:5.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+  img{
+      width:1.88rem;
+      height:1.88rem;
+  }
+</style>

pages/user/video_collect.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="flex">
+    <div class="box">
+      <div class="item">
+        <img src="~@/assets/quan/icon/new_article.png" alt="">
+        <div>投稿文章</div>
+      </div>
+      <div class="item">
+        <img src="~@/assets/quan/icon/new_video.png" alt="">
+        <div>投稿视频</div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  import WxMixin from "@/mixins/wx";
+
+  let container;
+  let page = 1;
+
+  export default {
+    layout: "opacity_header",
+    async asyncData({
+      $axios,
+      params,
+      req
+    }) {
+      let id = params.id;
+      let headers = req && req.headers;
+      let res = await $axios.$get(
+        `/api/user/getUserInfo?id=${id}&page=1&size=10`, {
+          headers
+        }
+      );
+      if (!res.data) {
+        return {
+          title: "的技术圈主页-程序员客栈"
+        };
+      }
+      return {
+        title: `${res.data.info.nickname}的技术圈主页-程序员客栈`
+      };
+    },
+    head() {
+      return {
+        title: this.title,
+        script: [{
+            src: "https://res.wx.qq.com/open/js/jweixin-1.2.0.js"
+          },
+          {
+            src: "https://hm.baidu.com/hm.js?18455f493c982100e5a82ec978a8d06e"
+          }
+        ]
+      };
+    },
+    mixins: [WxMixin],
+    data() {
+      return {
+        collect_title:'方案名称',
+        collect_des:'解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介绍解决方案名称介',
+        company_info:{
+          img:'',
+          name:'公司的名字'
+        },
+        baseUrl: "",
+        jishuBaseUrl: "",
+        list: [],
+        currentPage: 1,
+        isLoading: false,
+        noMore: false,
+        idInfo: {},
+        item: 'heji'
+      };
+    },
+    computed: {
+      info() {
+        return this.idInfo.info || {};
+      },
+      arts() {
+        return this.idInfo.topics || [];
+      }
+    },
+    mounted() {
+      container = this.$refs.container;
+      this.getDetail();
+    },
+    methods: {
+      changeitem(x) {
+        this.item = x
+      },
+      async getDetail() {
+        let res = await this.$axios.$get(
+          `/api/user/getUserInfo?id=${this.$route.params.id}&page=1&size=10`
+        );
+        // console.log(res.data)
+        if (res.data) {
+          document.title = `${res.data.info.nickname}的技术圈主页-程序员客栈`;
+          this.idInfo = res.data;
+        }
+      },
+      async handleDelete(topic) {
+        console.log(topic);
+        await this.needLogin();
+        if (!this.idInfo.has_edit_delete_access) {
+          this.$message.error("你没有该文章的操作权限");
+        }
+        this.$confirm(`<p>确认删除该文章吗？</p>`, "提示", {
+            dangerouslyUseHTMLString: true
+          })
+          .then(async () => {
+            this.$axios
+              .$post("/api/community/topic/delete", {
+                topic_id: topic.id
+              })
+              .then(() => {
+                this.$message({
+                  message: "删除成功",
+                  type: "success"
+                });
+                this.getDetail();
+              })
+              .catch(() => {
+                this.$message.error("该文章不存在");
+                setTimeout(() => location.reload(), 1000);
+              });
+          })
+          .catch(err => {
+            console.log("cancel");
+          });
+      },
+      clickLancer({
+        id
+      }) {
+        this.$router.push(baseUrl + `/cert/type/${id}`);
+      },
+      btnDisabled(item) {
+        return item.btn_name !== "申请认证" || !item.can_click;
+      },
+      async getList() {
+        let id = this.$route.params.id;
+        this.isLoading = true;
+        // console.log(id)
+        let res = await this.$axios.$get(
+          `/api/user/getUserInfo?id=${id}&page=${this.currentPage}&size=10`, {}, {
+            neverLogout: true
+          }
+        );
+        this.isLoading = false;
+        if (res) {
+          if (this.currentPage === 1 || this.$store.state.isPC) {
+            this.idInfo = res.data;
+          } else {
+            if (!res.data.topics.length) {
+              this.noMore = true;
+              return;
+            }
+            this.idInfo.topics = [...this.idInfo.topics, ...res.data.topics];
+          }
+        }
+      },
+      canApply(item) {
+        return item.end_date && item.is_cert_validate && item.cert_no;
+      },
+      configWx() {
+        try {
+          let conf = this.$store.state.wxConfig;
+          wx.ready(function() {
+            //需在用户可能点击分享按钮前就先调用
+            wx.config({
+              debug: true,
+              appId: conf.appId,
+              timestamp: conf.timestamp,
+              nonceStr: conf.nonceStr,
+              signature: conf.signature,
+              jsApiList: [
+                // 所有要调用的 API 都要加到这个列表中
+                "onMenuShareTimeline", // 分享到朋友圈接口
+                "onMenuShareAppMessage", //  分享到朋友接口
+                "onMenuShareQQ", // 分享到QQ接口
+                "onMenuShareWeibo" // 分享到微博接口
+              ],
+              success: function() {
+                alert("wx.config ok");
+              },
+              error: function(d) {
+                alert("wx.config err:" + JSON.stringify(d));
+              }
+            });
+            wx.updateAppMessageShareData({
+              title: "开发者资质认证", // 分享标题
+              desc: "通过平台审核、认证，将获得更多接单机会", // 分享描述
+              link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+              imgUrl: "https://stacdn.proginn.com/favicon.ico", // 分享图标
+              success: function() {
+                // 设置成功
+                alert("微信图标设置成功");
+              }
+            });
+          });
+        } catch (error) {
+          // alert(error);
+        }
+      },
+      /**
+       * 修改页码
+       */
+      changePagination(page) {
+        this.currentPage = page;
+        this.getList();
+      },
+      /**
+       * 点击关注按钮
+       */
+      async doFollow() {
+        // 移动端处理
+        if (!this.$store.state.isPC && !this.$store.getters.isLogin) {
+          location.href = "proginn://login";
+          return;
+        }
+        let res = await this.$axios.$post(`/api/user/follow`, {
+          follow_id: this.$route.params.id
+        });
+        if (res && res.data) {
+          this.idInfo.has_follow = res.data.follow_status ? 1 : 0;
+        } else {
+          this.goLogin(1, true);
+        }
+      },
+      /**
+       * 点击文章
+       */
+      clickArt(art, index) {
+        location.href = `/p/${art.id}.html`;
+      },
+      /**
+       * 监听滚动
+       */
+      containerScroll() {
+        if (this.isLoading || this.noMore) return;
+        // PC不监听
+        if (this.$store.state.isPC) return;
+        if (
+          container.scrollHeight - container.scrollTop - container.clientHeight <
+          50
+        ) {
+          this.currentPage++;
+          this.getList();
+        }
+      }
+    },
+    created() {
+      this.baseUrl = this.$store.state.domainConfig.siteUrl;
+      this.jishuBaseUrl = this.$store.state.domainConfig.jishuinUrl;
+    }
+  };
+</script>
+<style>
+  body{
+    background-color: white;
+  }
+</style>
+<style lang='less' scoped>
+ .flex{
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+  .item{
+    text-align: center;
+    font-size:0.3rem;
+    font-family:PingFangSC-Semibold,PingFang SC;
+    font-weight:600;
+    color:rgba(34,34,34,1);
+    line-height:0.35rem;
+  }
+  .box{
+    height:5.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+  img{
+      width:1.88rem;
+      height:1.88rem;
+  }
+</style>