Merge branch 'master' into xuebaoxin

src/IndexFind.vue

@@ -1,19 +1,22 @@
 <template>
   <div class="indexfind">
-    <indexfindhead></indexfindhead>
+    <indexfindhead @serch="serch"></indexfindhead>
   <div class="tab">
     <indexfindtab @changeno="getno"></indexfindtab>
   </div>
 <div class="all" v-if="no==0">
-  <div class="all1">
+  <div class="all1" v-for="(i,j) in list" :key="j">
-    <indexfindall title="学法律后，对你最大的影响或改变是什么？"  num="525"  :right="pics"></indexfindall>
+    <indexfindall :title="i.title"  :num="i.comment"  :right="i.avatar" :content="i.text"></indexfindall>
   </div>
-  <div class="all1">
+  <!-- <div class="all1">
     <indexfindall title="学法律后，对你最大的影响或改变是什么？"  num="1532"  :right="pics"></indexfindall>
-  </div>
+  </div> -->
 </div>
 <div class="user" v-if="no==1">
-  <div class="user1">
+  <div class="user1" v-for="(i,j) in list2" :key="j">
+    <indedfinduser :answer="i.answer" :article="i.article" :attention="i.attention" :username="i.nickname" :pic="i.avatar"></indedfinduser>
+  </div>
+  <!-- <div class="user1">
     <indedfinduser></indedfinduser>
   </div>
     <div class="user1">
@@ -21,18 +24,19 @@
   </div>
     <div class="user1">
     <indedfinduser></indedfinduser>
-  </div>
+  </div> -->
-    <div class="user1">
-    <indedfinduser></indedfinduser>
-  </div>
 </div>
 <div class="user" v-if="no==2">
-  <div class="user1">
+    <div class="user1" v-for="(i,j) in list3" :key="j">
-    <indedfinduser></indedfinduser>
+      <!-- klmklvnklnkvl -->
+    <indedfinduser :username="i.topic_name" :pic="i.img"  :desc="i.text"  :ifnum="false"></indedfinduser>
   </div>
-    <div class="user1">
+  <!-- <div class="user1">
     <indedfinduser></indedfinduser>
-  </div>
+  </div> -->
+    <!-- <div class="user1">
+    <indedfinduser></indedfinduser>
+  </div> -->
 </div>
   </div>
 </template>
@@ -49,17 +53,83 @@ components:{
   indexfindtab,
   indexfindall,
   indedfinduser
+},
+mounted(){
+  // http://lawpro.earnest.pro/uploads/20191121/145e1911017ac255f25d6eb760d0bb4c.jpg
+  var t=this;
+  t.axios.post("http://lawpro.earnest.pro/api/login_main/indexsearch", {where:t.$route.query.word,type:0}).then((res)=>{
+            window.console.log(res)
+                    for(let i in res.data.data){
+            res.data.data[i].avatar=  res.data.data[i].avatar.substr(1)
+             res.data.data[i].avatar= "http://lawpro.earnest.pro/"+res.data.data[i].avatar
+          }
+            t.list=res.data.data
+          })
+
+            t.axios.post("http://lawpro.earnest.pro/api/login_main/indexsearch", {where:t.$route.query.word,type:5}).then((res)=>{
+            window.console.log(res)
+                    for(let i in res.data.data){
+            res.data.data[i].avatar=  res.data.data[i].avatar.substr(1)
+             res.data.data[i].avatar= "http://lawpro.earnest.pro/"+res.data.data[i].avatar
+          }
+            t.list2=res.data.data
+          })
+
+             t.axios.post("http://lawpro.earnest.pro/api/login_main/indexsearch", {where:t.$route.query.word,type:2}).then((res)=>{
+            window.console.log(res)
+                    for(let i in res.data.data){
+            res.data.data[i].img=  res.data.data[i].img.substr(1)
+             res.data.data[i].img= "http://lawpro.earnest.pro/"+res.data.data[i].img
+          }
+            t.list3=res.data.data
+          })
+          
+  
 },
 methods:{
   getno(e){
      window.console.log(e)
      this.no=e
+  },
+  serch(e){
+    let t=this;
+    window.console.log(e)
+     t.axios.post("http://lawpro.earnest.pro/api/login_main/indexsearch", {where:e,type:0}).then((res)=>{
+            window.console.log(res)
+                    for(let i in res.data.data){
+            res.data.data[i].avatar=  res.data.data[i].avatar.substr(1)
+             res.data.data[i].avatar= "http://lawpro.earnest.pro/"+res.data.data[i].avatar
+          }
+            t.list=res.data.data
+          })
+
+
+      t.axios.post("http://lawpro.earnest.pro/api/login_main/indexsearch", {where:e,type:2}).then((res)=>{
+            window.console.log(res)
+                    for(let i in res.data.data){
+            res.data.data[i].img=  res.data.data[i].img.substr(1)
+             res.data.data[i].img= "http://lawpro.earnest.pro/"+res.data.data[i].img
+          }
+            t.list3=res.data.data
+          })
+              t.axios.post("http://lawpro.earnest.pro/api/login_main/indexsearch", {where:e,type:5}).then((res)=>{
+            window.console.log(res)
+                    for(let i in res.data.data){
+            res.data.data[i].avatar=  res.data.data[i].avatar.substr(1)
+             res.data.data[i].avatar= "http://lawpro.earnest.pro/"+res.data.data[i].avatar
+          }
+            t.list2=res.data.data
+          })
   }
 },
 data(){
   return {
     pics,
-    no:0
+    no:0,
+    list:[],
+    list1:[],
+    list2:[],
+    list3:[]
   }
 }
 }

src/components/indexfindall.vue

@@ -3,99 +3,106 @@
     <p class="title">{{title}}</p>
     <div class="content">
       <div class="left">
-              <p class="text">  <b>职问：</b>因为学习工作而在不同程度上变得“麻木”。实际上，长期从事法律</p>
+        <!-- <p class="text">  <b>职问：</b>因为学习工作而在不同程度上变得“麻木”。实际上，长期从事法律</p> -->
+        <p class="text">{{content}}</p>
         <div class="operation">
           <div>
-                      <img src="../assets/share.png" alt="" class="icon">
+            <img src="../assets/share.png" alt class="icon" />
             <p>分享</p>
           </div>
           <div>
-                      <img src="../assets/pinglun.png" alt="" class="icon">
+            <img src="../assets/pinglun.png" alt class="icon" />
             <p>{{num}}条评论</p>
           </div>
         </div>
       </div>
-        <img   :src="right" alt="" class="right">
+      <img :src="right" alt class="right" />
     </div>
   </div>
 </template>
 
 <script>
 export default {
-name:"indexfindall",
+  name: "indexfindall",
-data(){
+  data() {
-    return{
+    return {
-        aaa:"../assets/ad.png"
+      aaa: "../assets/ad.png"
-    }
+    };
-},
-props:{
-    title:{
-        type:String
   },
-    num:{
+  props: {
-        type:String
+    title: {
+      type: String
     },
-  right:{
+    num: {
-     
+      type: Number
+    },
+    content: {
+      type: String
+    },
+    right: {}
   }
-}
+};
-}
 </script>
 
 <style lang="scss">
-.indexfindall{
+.indexfindall {
-width: 100%;
+  width: 100%;
-// height: 262px;
+  // height: 262px;
-background-color: white;
+  background-color: white;
-.title{
+  .title {
     color: #333333;
     font-size: 34px;
-    font-weight:500;
+    font-weight: 500;
     padding-top: 34px;
     padding-bottom: 23px;
-}
+  }
-.content{
+  .content {
     width: 689px;
     height: 139px;
     margin: 0 auto;
     display: flex;
     padding-bottom: 41px;
     // justify-content: center;
-    .left{
+    .left {
       width: 457px;
-        .text{
+
+      .text {
         color: #333333;
         font-size: 28px;
-            line-height:35px;
+        line-height: 35px;
+        overflow: hidden; //超出的文本隐藏
+        display: -webkit-box; //作为弹性伸缩盒子模型显示。
+        -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+        -webkit-line-clamp: 2; //显示的行
+        text-overflow: ellipsis; //溢出用省略号显示
       }
-        .operation{
+      .operation {
         // width: 271px;
         margin-top: 47px;
-            color: #95998F;
+        color: #95998f;
         font-size: 22px;
         display: flex;
 
-            >div{
+        > div {
           display: flex;
-                         >p{
+          > p {
             margin-right: 60px;
             margin-left: 10px;
           }
         }
 
         // justify-content: space-between;
-            .icon{
+        .icon {
           width: 18px;
           height: 18px;
         }
-        
       }
     }
-    .right{
+    .right {
-        width:209px;
+      width: 209px;
-height:139px;
+      height: 139px;
-border-radius:5px;
+      border-radius: 5px;
-margin-left: 23px;
+      margin-left: 23px;
     }
   }
 }

src/components/indexfindhead.vue

@@ -12,7 +12,7 @@
       <img class="logo" src alt srcset />
       <div class="search">
         <img src alt />
-        <input type="text" placeholder="搜索" />
+        <input type="text" placeholder="搜索"  v-on:change ="shuru" v-model="serch"/>  
       </div>
       <div class="mnue" @click="isshow">
         <!-- <div></div>
@@ -97,12 +97,23 @@ export default {
   name: "indexhead",
   data() {
     return {
-      show: false
+      show: false,
+      serch:""
     };
   },
+  mounted(){
+    this.serch=this.$route.query.word
+  },
   methods: {
     isshow() {
-      this.show = !this.show;
+      // this.show = !this.show;
+           this.$router.push({
+        path: `/index`
+      });
+    },
+    shuru(){
+      // window.console.log(this.serch)
+      this.$emit("serch",this.serch)
     }
   }
 };

src/components/indexfinduser.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="indexfinduser">
     <div class="left">
-      <img src="../assets/ad.png" alt class="photo" />
+      <img :src="pic" alt class="photo" />
       <div class="userinfo">
         <div class="username">
-          <p>法律小知知</p>
+          <p>{{username}}</p>
           <img src="../assets/renzheng.png" alt class="icon" />
         </div>
-        <p class="desc">律师、合伙人、男</p>
+        <p class="desc">{{desc}}</p>
-        <p class="desc1">399 回答·5 文章·12 关注者</p>
+        <p class="desc1" v-if="ifnum">{{answer}} 回答·{{article}} 文章·{{attention}} 关注者</p>
       </div>
     </div>
 
@@ -23,7 +23,31 @@
 
 <script>
 export default {
-  name: "indexfinduser"
+  name: "indexfinduser",
+  props:{
+    username:{
+      type:String
+    },
+    desc:{
+      type:String
+    },
+    answer:{
+      type:Number
+    },
+    article:{
+      type:Number
+    },
+    attention:{
+      type:Number
+    },
+    ifnum:{
+      type:Boolean,
+      default:true
+    },
+    pic:{
+      
+    }
+  }
 };
 </script>
 
@@ -62,6 +86,8 @@ export default {
         margin-top: 28px;
         margin-bottom: 22px;
         font-size: 28px;
+        width: 78%;
+        line-height: 35px;
       }
       .desc1 {
         color: #95998f;

src/components/indexhead.vue

@@ -12,7 +12,7 @@
       <img class="logo" src alt srcset />
       <div class="search">
         <img src alt />
-        <input type="text" placeholder="搜索" />
+        <input type="text" placeholder="搜索" v-on:change="shuru" v-model="serch" />
       </div>
       <div class="mnue" @click="isshow">
         <div></div>
@@ -23,8 +23,8 @@
   </div>
 </template>
 <style lang="scss" scoped>
-  .mnuelist{
+.mnuelist {
-      padding:26px;
+  padding: 26px;
   height: 194px;
   box-sizing: border-box;
   display: flex;
@@ -32,7 +32,7 @@
   flex-direction: column;
   color: #333;
   font-size: 24px;
-  }
+}
 .head {
   position: fixed;
   top: 0;
@@ -94,12 +94,19 @@ export default {
   name: "indexhead",
   data() {
     return {
-      show: false
+      show: false,
+      serch: ""
     };
   },
   methods: {
     isshow() {
       this.show = !this.show;
+    },
+    shuru() {
+      window.console.log(this.serch);
+      this.$router.push({
+        path: `/indexfind?word=`+this.serch
+      });
     }
   }
 };

src/login.vue

@@ -11,7 +11,7 @@
     </div>
 
     <div class="tel yzm">
-      <input type="text" class="shuru tel1" placeholder="输入6位验证码" v-model="yzm"/>
+      <input type="text" class="shuru tel1" placeholder="输入6位验证码" v-model="yzm" />
       <button class="getyzm" @click="yz">发送验证码</button>
     </div>
     <div class="ale">
@@ -19,10 +19,10 @@
       <p>注册即同意《隐私保护指引》</p>
     </div>
     <button class="submit" @click="sub">登录</button>
-    <div class="other">
+    <!-- <div class="other">
-      <p>密码登录</p>
+      <p  @click="loginpwd">密码登录</p>
       <p @click="open">需要帮助？</p>
-    </div>
+    </div>-->
     <div class="ways">
       <div class="top">
         <div class="line"></div>
@@ -30,9 +30,24 @@
         <div class="line"></div>
       </div>
       <div class="icons">
+        <!-- <div>
               <img src="./assets/wechat.png" alt class="icon" />
-        <img src="./assets/weibo.png" alt class="icon" />
+        </div>-->
-        <img src="./assets/qq.png" alt class="icon" />
+
+        <div>
+          <!-- <a
+            href="https://open.weixin.qq.com/connect/qrconnect?appid=wxfe6e5d36322af62f&redirect_uri=http%3a%2f%2fwww.lawpro.cn%2f&response_type=code&scope=snsapi_login&state=lawpro#wechat_redirect"
+          > -->
+                <a
+            href="https://open.weixin.qq.com/connect/qrconnect?appid=wxfe6e5d36322af62f&redirect_uri=http%3a%2f%2fwww.lawpro.cn%2f&response_type=code&scope=snsapi_login&state=lawpro#wechat_redirect"
+          >
+            <!-- <i class="icon-wechatl"></i>微信 -->
+            <img src="./assets/wechat.png" alt class="icon" />
+          </a>
+        </div>
+
+        <!-- <img src="./assets/weibo.png" alt class="icon" />
+        <img src="./assets/qq.png" alt class="icon" />-->
       </div>
     </div>
     <div class="tanchuangbox" v-if="ifshow">
@@ -51,9 +66,10 @@ export default {
     return {
       ifshow: false,
       tel: "",
-      yzm:"",
+      yzm: "",
-      yztoken:"",
+      yztoken: "",
-      Verification:""
+      Verification: "",
+      ifsign: false
     };
   },
   methods: {
@@ -63,41 +79,73 @@ export default {
     off() {
       this.ifshow = false;
     },
+    loginpwd() {
+      this.$router.push({
+        path: `/loginpwd`
+      });
+    },
     yz() {
-      let yz=""
+      let yz = "";
       if (this.tel != "") {
         window.console.log("aaaa");
-        var t =this
+        var t = this;
-        this.axios.post("http://lawpro.earnest.pro/api/Main/Verification", {
+        this.axios
-            mobile:this.tel
+          .post("http://lawpro.earnest.pro/api/Main/Verification", {
-          }).then(function(res) {
+            mobile: this.tel
+          })
+          .then(function(res) {
             window.console.log(res.data.data);
-          yz=res.data.data.yz;
+            yz = res.data.data.yz;
-          t.yztoken=yz
+            t.yztoken = yz;
-          }).catch(function(error) {
+            t.ifsign = res.data.data.register;
+          })
+          .catch(function(error) {
             window.console.log(error);
           });
       } else {
         window.console.log("请输入正确的手机号");
       }
-      
     },
-    sub(){
+    sub() {
-      let t=this;
+      let t = this;
-      if(t.tel&&t.yzm){
+      window.console.log(t.ifsign, 4859);
-        this.axios.post("http://lawpro.earnest.pro/api/Main/isVerification",{Verification: t.yzm,yz:this.yztoken, mobile:this.tel}).then((res)=>{
+      if (t.ifsign) {
-          if(res.data.code==200){
+        if (t.tel && t.yzm) {
-            this.axios.post("http://lawpro.earnest.pro/api/Main/sign",{yz:t.yztoken,Verification:t.yzm,mobile:this.tel}).then((res)=>{
+          this.axios
-              window.console.log(res)
+            .post("http://lawpro.earnest.pro/api/Main/isVerification", {
-              localStorage.setItem('token', res.data.data)
+              Verification: t.yzm,
+              yz: this.yztoken,
+              mobile: this.tel
             })
-          }
+            .then(res => {
-          window.console.log(res)
+              if (res.data.code == 200) {
-        }).catch((err)=>{
+                this.axios
-          window.console.log(err)
+                  .post("http://lawpro.earnest.pro/api/Main/sign", {
+                    yz: t.yztoken,
+                    Verification: t.yzm,
+                    mobile: this.tel
                   })
+                  .then(res => {
+                    window.console.log(res);
+                    localStorage.setItem("token", res.data.data);
+                    this.$router.push({
+                      path: `/index`
+                    });
+                  });
               }
-      window.console.log( t.yztoken,t.Verification,9652)
+              window.console.log(res);
+            })
+            .catch(err => {
+              window.console.log(err);
+            });
+        }
+      } else {
+        this.$router.push({
+          path: `/sign?yztoken=` + t.yztoken + "&yzm=" + t.yzm + "&tel=" + t.tel
+        });
+      }
+
+      window.console.log(t.yztoken, t.Verification, 9652);
     }
   }
 };
@@ -173,7 +221,7 @@ export default {
     justify-content: space-between;
   }
   .getyzm {
-    width: 176px!important;
+    width: 176px !important;
     height: 54px;
     border: 2px solid rgba(107, 145, 71, 1);
     border-radius: 4px;

src/loginpwd.vue

@@ -10,18 +10,18 @@
       <input type="text" class="shuru" placeholder="输入手机号" />
     </div>-->
     <div class="tel yzm">
-      <input type="text" class="shuru tel1" placeholder="输入手机号或邮箱" />
+      <input type="text" class="shuru tel1" placeholder="输入手机号或邮箱"  v-model="username"/>
       <!-- <button class="getyzm">发送验证码</button> -->
     </div>
     <div class="tel yzm">
-      <input type="text" class="shuru tel1" placeholder="输入密码" />
+      <input type="password" class="shuru tel1" placeholder="输入密码" v-model="pwd"/>
       <!-- <button class="getyzm">发送验证码</button> -->
     </div>
     <div class="ale">
       <p class="alert">未注册手机验证后自动登录</p>
       <p>注册即同意《隐私保护指引》</p>
     </div>
-    <button class="submit">登录</button>
+    <button class="submit" @click="sub">登录</button>
     <div class="other">
       <p>密码登录</p>
       <p @click="open">需要帮助？</p>
@@ -52,7 +52,9 @@
 export default {
   data() {
     return {
-      ifshow: false
+      ifshow: false,
+      username:"",
+      pwd:""
     };
   },
   methods: {
@@ -61,6 +63,15 @@ export default {
     },
     off(){
       this.ifshow=false
+    },
+    sub(){
+      let t=this;
+      this.axios.post("http://lawpro.earnest.pro/api/Main/login",{uname:t.username,password:t.pwd}).then((res)=>{
+         localStorage.setItem('token', res.data.data)
+            this.$router.push({
+          path: `/index`,
+        })
+      })
     }
   }
 };

src/router.js

@@ -15,10 +15,15 @@ import IndexReport from "./IndexReport"
 import IndexReport1 from "./IndexReport1"
 import IndexReport2 from "./IndexReport2"
 import Answer from "./Answer"
+import sign from "./sign"
 const router=new Router({
   routes: [
     {
-      path: '/',
+      path: '/sign',
+      component: sign
+    },
+    {
+      path: '/IndexReport',
       component: IndexReport
     },
     {

src/sign.vue

@@ -0,0 +1,233 @@
+<template>
+  <div class="login">
+    <div class="logo">
+      <img src="./assets/quit.png" alt class="close" />
+    </div>
+    <!-- <div class="tel">
+      <p>+86</p>
+      <img src="./assets/order.png" alt class="order" />
+      <div class="line"></div>
+      <input type="text" class="shuru" placeholder="输入手机号" />
+    </div>-->
+    <div class="tel yzm">
+      <input type="text" class="shuru tel1" placeholder="输入用户名"  v-model="username"/>
+      <!-- <button class="getyzm">发送验证码</button> -->
+    </div>
+    <div class="tel yzm">
+      <input type="password" class="shuru tel1" placeholder="输入密码"  v-model="pwd"/>
+      <!-- <button class="getyzm">发送验证码</button> -->
+    </div>
+    <div class="ale">
+      <p class="alert">未注册手机验证后自动登录</p>
+      <p>注册即同意《隐私保护指引》</p>
+    </div>
+    <button class="submit" @click="sign">注册</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ifshow: false,
+      username:"",
+      pwd:""
+    };
+  },
+  methods: {
+    open() {
+      this.ifshow=true
+    },
+    off(){
+      this.ifshow=false
+    },
+    sign(){
+      let t=this;
+      window.console.log(t. $route.query.yztoken,t.$route.query.yzm)
+         this.axios.post("http://lawpro.earnest.pro/api/Main/sign",{yz:t. $route.query.yztoken,Verification:t.$route.query.yzm,mobile:t.$route.query.tel,username:t.username,password:t.pwd}).then((res)=>{
+            localStorage.setItem('token', res.data.data)
+         })
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+.login {
+  .close {
+    width: 36px;
+    height: 36px;
+    float: right;
+    margin-top: 26px;
+    margin-right: 30px;
+  }
+  .logo {
+    width: 100%;
+    height: 272px;
+    background: url("./assets/logo.png");
+    background-size: 100% 100%;
+  }
+  .tel {
+    width: 690px;
+    height: 84px;
+    line-height: 84px;
+    text-indent: 9px;
+    font-size: 25px;
+    color: #333333;
+    display: flex;
+    border-bottom: 2px solid #dfdfdf;
+    margin-left: 30px;
+    .order {
+      width: 13px;
+      height: 24px;
+      margin: auto 0;
+      margin-left: 25px;
+    }
+    .line {
+      width: 1px;
+      height: 30px;
+      margin: auto 0;
+      margin-left: 35px;
+      background-color: #dfdfdf;
+    }
+    .shuru {
+      width: 75%;
+      height: 74px;
+      color: #333333;
+      font-size: 28px;
+      margin: auto 0;
+      margin-left: 36px;
+      // position: relative;
+      // top: -1px;
+      outline-style: none;
+      outline-width: 0px;
+      border: none;
+      border-style: none;
+      text-shadow: none;
+      -webkit-appearance: none;
+      -webkit-user-select: text;
+      outline-color: transparent;
+      box-shadow: none;
+    }
+    .shuru::placeholder {
+      color: #999999;
+    }
+  }
+  .tel1 {
+    margin-left: 11px !important;
+    font-size: 26px !important;
+  }
+  .yzm {
+    display: flex;
+    justify-content: space-between;
+  }
+  .getyzm {
+    width: 166px;
+    height: 54px;
+    border: 2px solid rgba(107, 145, 71, 1);
+    border-radius: 4px;
+    background-color: white;
+    margin: auto 0;
+    color: #6b9147;
+    font-size: 24px;
+    line-height: 54px;
+  }
+  .ale {
+    height: 58px;
+    margin: 0 auto;
+    margin-top: 50px;
+    color: #999999;
+    font-size: 22px;
+    text-align: center;
+    // line-height: 30px;
+    .alert {
+      text-indent: -15px;
+      margin-bottom: 15px;
+    }
+  }
+  .submit {
+    border: 0;
+    background-color: transparent;
+    outline: none;
+    width: 690px;
+    height: 88px;
+    background-color: #6b9147;
+    line-height: 88px;
+    text-align: center;
+    color: white;
+    font-size: 36px;
+    border-radius: 4px;
+    margin-left: 30px;
+    margin-top: 129px;
+  }
+  .other {
+    color: #6b9147;
+    font-size: 26px;
+    margin-top: 39px;
+    display: flex;
+    justify-content: space-between;
+    > p:first-child {
+      margin-left: 31px;
+    }
+    > p:last-child {
+      margin-right: 43px;
+    }
+  }
+  .ways {
+    margin-top: 149px;
+    .top {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 99px;
+      height: 24px;
+      .line {
+        width: 120px;
+        height: 2px;
+        margin-top: 12px;
+      }
+      .text {
+        color: #999999;
+        font-size: 24px;
+        margin-left: 20px;
+        margin-right: 20px;
+      }
+    }
+  }
+  .icons {
+    display: flex;
+    justify-content: space-around;
+    // margin-bottom: 165px;
+    margin-bottom: 100px;
+    .icon {
+      width: 71px;
+      height: 71px;
+    }
+  }
+  .tanchuangbox{
+    width: 750px;
+    height: 1334px;
+    background: rgba(0, 0, 0, 0.3);
+    position: absolute;
+    top: 0;
+    .tanchuang{
+      width: 580px;
+      height: 339px;
+      background-color: white;
+      margin: auto;
+      margin-top: 353px;
+      color: #333333;
+      font-size: 36px;
+      text-align: center;
+      .desc{
+        margin-bottom:59px;
+      }
+      .desc1{
+        padding-top: 59px;
+      }
+      .off{
+        color: #666666
+      }
+    }
+  }
+}
+</style>