新增达人推荐页面

zhiyangdu
1 parent 44dbef9a
Showing 3 changed files with 105 additions and 5 deletions
src/components/recommendDaren/recommendDaren.less
src/components/recommendDaren/recommendDaren.vue
src/pages/newDaren/newDaren.vue
+.recommendDaren{
+    padding: 0 30px;
+    display: flex;
+    .daren_box{
+        width:210px;
+        height:auto;
+        background:rgba(255,255,255,1);
+        box-shadow:0px 0px 12px 0px rgba(0,0,0,0.06);
+        border-radius:12px;
+        text-align: center;
+        padding: 30px 0;
+        margin-left: 30px;
+        .head_portrait{
+            width: 100px;
+            height: 100px;
+            border-radius: 100px;
+            margin: 0 auto 7px auto;
+        }
+        .name{
+            height:40px;
+            line-height: 40px;
+            font-size:28px;
+            font-weight:500;
+            color:rgba(51,51,51,1);
+        }
+        .desc{
+            height:25px;
+            font-size:18px;
+            font-weight:400;
+            color:rgba(153,153,153,1);
+            line-height:25px;
+            font-size: 18px;
+        }
+        .btn{
+            width:120px;
+            height:48px;
+            border-radius:26px;
+            border:1px solid rgba(252,21,65,1);
+            color: #FC1541;
+            font-size: 26px;
+            line-height: 48px;
+            margin: 25px auto 0 auto;
+        }
+    }
+    .daren_box:nth-child(1){
+        margin-left: 0px;
+    }
+
+}
+<template>
+  <div class="recommendDaren">
+      <div class="daren_box">
+          <img class="head_portrait" src="/static/img/2.png" />
+       <div class="name">
+           冯提莫
+       </div>
+       <div class="desc">
+           国内女装大佬TOP10
+       </div>
+          <div class="btn">
+              关注
+          </div>
+      </div>
+      <div class="daren_box">
+          <img class="head_portrait" src="/static/img/2.png" />
+          <div class="name">
+              冯提莫
+          </div>
+          <div class="desc">
+              国内女装大佬TOP10
+          </div>
+          <div class="btn">
+              关注
+          </div>
+      </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'recommendDaren',
+    data () {
+      return {
+
+      }
+    },
+    created(){
+
+    },
+    methods: {
+    }
+  }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style rel="stylesheet/less" lang="less" scoped>
+    @import "recommendDaren";
+</style>
@@ -9,6 +9,8 @@
         </swiper>
         <!--达人信息-->
         <darenInfo :darenInfo="darenInfo"></darenInfo>
+        <!--推荐达人-->
+        <recommendDaren></recommendDaren>
         <!-- 达人动态列表 -->
         <daren-list-box class="daren-list" @userJump="userJump" @jump="jump" @goodsJump="goodsJump" @goodsPrimary="goodsPrimary"
             :lists="[
@@ -175,22 +177,22 @@
 	import darenListBox from "@/components/darenListBox/darenListBox";
 	import textTitleBox from "@/components/textTitleBox/textTitleBox";
     import darenInfo from "@/components/darenInfo/darenInfo";
+    import recommendDaren from "@/components/recommendDaren/recommendDaren";
     export default {
         name: "darenList",
         data() {
             return {
                 title: "",              // 标题
-
-
-
-
+                darenInfo:null,         // 达人信息
+                banner:null             // 轮播
             }
         },
         components:{
             darenListBox,
             textTitleBox,
             swiper,
-            darenInfo
+            darenInfo,
+            recommendDaren
         },
         created() {