w-front-end / select_good · Commits

Commit 58bd5992409220f5cd874bdc918c5be4c2ace5d6

Authored by zhiyangdu
1 parent 9aa3b99c

新增组件

Inline Side-by-side
Showing 3 changed files with 223 additions and 0 deletions
src/components/giftItem/giftItem.less 0 → 100644
  View file @58bd599
  1 +.giftItem_box{
  2 + width:640px;
  3 + height:453px;
  4 + background:rgba(255,255,255,1);
  5 + box-shadow:0px 0px 20px 0px rgba(0,0,0,0.08);
  6 + border-radius:16px;
  7 + margin: 43px auto 0 auto;
  8 + padding: 25px;
  9 + .user_info{
  10 + display: flex;
  11 + position: relative;
  12 + padding-bottom: 22px;
  13 + border-bottom: solid 1px rgba(247,247,248,1);
  14 + img{
  15 + width:50px;
  16 + height:50px;
  17 + border-radius: 50px;
  18 + }
  19 + .name{
  20 + height:40px;
  21 + font-size:28px;
  22 + font-weight:400;
  23 + color:rgba(51,51,51,1);
  24 + line-height:40px;
  25 + margin-left: 20px;
  26 + }
  27 + .btn{
  28 + width:144px;
  29 + height:52px;
  30 + line-height: 52px;
  31 + background:rgba(254,246,233,1);
  32 + border-radius:96px 0px 0px 96px;
  33 + text-align: center;
  34 + font-size: 26px;
  35 + font-weight:400;
  36 + color:rgba(245,166,35,1);
  37 + position: absolute;
  38 + right: -35px;
  39 + }
  40 + .gift_active{
  41 + height:40px;
  42 + font-size:28px;
  43 + font-weight:400;
  44 + color:rgba(208,2,27,1);
  45 + line-height:40px;
  46 + }
  47 + }
  48 + .item_info{
  49 + display: flex;
  50 + margin-top: 30px;
  51 + padding-bottom: 30px;
  52 + border-bottom: solid 1px rgba(247,247,248,1);
  53 + img{
  54 + width:159px;
  55 + height:160px;
  56 + border-radius:10px;
  57 + }
  58 + .box{
  59 + margin-left: 30px;
  60 + position: relative;
  61 + .name{
  62 + font-size:28px;
  63 + font-weight:400;
  64 + color:rgba(51,51,51,1);
  65 + max-height: 80px;
  66 + /*! autoprefixer: off */
  67 + -webkit-box-orient: vertical;
  68 + /*! autoprefixer: on */
  69 + display: -webkit-box;
  70 + -webkit-line-clamp: 2;
  71 + overflow: hidden;
  72 + white-space: normal;
  73 + }
  74 + .pirce{
  75 + width: 100%;
  76 + position: absolute;
  77 + left: 0;
  78 + bottom: 0;
  79 + display: flex;
  80 + justify-content: space-between;
  81 + .title{
  82 + span{
  83 + width:15px;
  84 + height:33px;
  85 + font-size:24px;
  86 + font-weight:500;
  87 + color:rgba(208,2,27,1);
  88 + line-height:33px;
  89 + }
  90 + height:50px;
  91 + font-size:36px;
  92 + font-weight:500;
  93 + color:rgba(208,2,27,1);
  94 + line-height:50px;
  95 + }
  96 + .btn{
  97 + width:146px;
  98 + height:52px;
  99 + line-height: 52px;
  100 + background:rgba(253,241,242,1);
  101 + border-radius:8px;
  102 + text-align: center;
  103 + font-size: 26px;
  104 + color:rgba(208,2,27,1);
  105 + }
  106 + }
  107 + }
  108 + }
  109 + .steps_box{
  110 + margin-top: 58px;
  111 + .box{
  112 + display: flex;
  113 + .item{
  114 + .img{
  115 + width:16px;
  116 + height:16px;
  117 + border-radius: 16px;
  118 + border:3px solid rgba(202,202,202,1);
  119 + margin: auto;
  120 + }
  121 + .desc{
  122 + height:30px;
  123 + font-size:22px;
  124 + font-weight:400;
  125 + color:rgba(202,202,202,1);
  126 + line-height:30px;
  127 + margin-top: 20px;
  128 + }
  129 + }
  130 + .line_box {
  131 + height: 19px;
  132 + display: flex;
  133 + align-items: center;
  134 + .line {
  135 + width: 130px;
  136 + height: 1px;
  137 + background: rgba(240, 240, 240, 1);
  138 + margin: auto 16px;
  139 + }
  140 + }
  141 + }
  142 + .box:last-child{
  143 + .line_box{
  144 + display: flex;
  145 + }
  146 + }
  147 + }
  148 +}
src/components/giftItem/giftItem.vue 0 → 100644
  View file @58bd599
  1 +<template>
  2 + <div class="giftItem_box">
  3 + <!--用户信息-->
  4 + <div class="user_info">
  5 + <img src="static/img/1.png"/>
  6 + <div class="name">
  7 + 欧阳娜娜(赠礼)
  8 + </div>
  9 + <div class="btn">
  10 + 回赠礼物
  11 + </div>
  12 + <div class="gift_active">
  13 +
  14 + </div>
  15 + </div>
  16 + <!--商品信息-->
  17 + <div class="item_info">
  18 + <img src="static/img/1.png"/>
  19 + <div class="box">
  20 + <div class="name">
  21 + 品牌官方直营 - 施华洛世奇时尚黑天鹅锁
  22 + </div>
  23 + <div class="pirce">
  24 + <div class="title"><span>￥</span>148.00</div>
  25 + <div class="btn">点击收礼</div>
  26 + </div>
  27 + </div>
  28 + </div>
  29 + <!--步骤条-->
  30 + <div class="steps_box">
  31 + <div class="box">
  32 + <div class="item">
  33 + <div class="img">
  34 +
  35 + </div>
  36 + <!--<img src="/static/img/1.png"/>-->
  37 + <div class="desc">
  38 + 点击送礼
  39 + </div>
  40 + </div>
  41 + <div class="line_box">
  42 + <div class="line">
  43 +
  44 + </div>
  45 + </div>
  46 + </div>
  47 + </div>
  48 + </div>
  49 +</template>
  50 +
  51 +<script>
  52 + export default {
  53 + name: 'name',
  54 + data () {
  55 + return {
  56 +
  57 + }
  58 + },
  59 + created(){
  60 +
  61 + },
  62 + methods: {
  63 + }
  64 + }
  65 +</script>
  66 +
  67 +<!-- Add "scoped" attribute to limit CSS to this component only -->
  68 +<style rel="stylesheet/less" lang="less" scoped>
  69 + @import "giftItem";
  70 +</style>
src/pages/myGiftBox/myGiftBox.vue
  View file @58bd599
@@ -23,10 +23,12 @@ @@ -23,10 +23,12 @@
23 </div> 23 </div>
24 </div> 24 </div>
25 <!--内容--> 25 <!--内容-->
  26 + <giftItem></giftItem>
26 </div> 27 </div>
27 </template> 28 </template>
28 29
29 <script> 30 <script>
  31 + import giftItem from "@/components/giftItem/giftItem"
30 export default { 32 export default {
31 name: 'myGiftBox', 33 name: 'myGiftBox',
32 data () { 34 data () {
@@ -34,6 +36,9 @@ @@ -34,6 +36,9 @@
34 active: 2, 36 active: 2,
35 } 37 }
36 }, 38 },
  39 + components:{
  40 + giftItem
  41 + },
37 created(){ 42 created(){
38 43
39 }, 44 },