oil-station/gasStation-uni/pagesMy/VIP/vip.vue

<template>
  <view class="content">
    <view class="container">
      <view class="my-header">
        <view class="my-icons" @click="goback"> <uni-icons type="left" size="16"></uni-icons> </view>
        <view class="my-text">会员</view>
        <view class="my-icons"></view>
      </view>
      <!-- 顶部区域 -->
      <view class="top-box">
        <view class="b-top">
          <view style="width: 70%;">
            <view class="title-size">V2会员</view>
            <view class="min-size" style="margin-bottom: 20px;">升级会员享更多特权</view>
            <view class="min-size" style="margin-bottom: 10px;">在获得358可升级至钻石会员</view>
            <u-line-progress :percentage="30" activeColor="#2F72F7"></u-line-progress>
          </view>
          <view class="right-img">
            <image src="../../static/imgs/vipxz.png" mode=""></image>
          </view>
        </view>
      </view>
      <view class="c-box">
        <view class="title-bai">会员权益</view>
        <view class="wrap-box">
          <view class="box-ba">
            <view class="min-box">
              <image src="../../static/imgs/vipxz.png" mode=""></image>
            </view>
            <view class="">会员特权</view>
          </view>
          <view class="box-ba">
            <view class="min-box">
              <image src="../../static/imgs/vipxz.png" mode=""></image>
            </view>
            <view class="">会员特权</view>
          </view>
          <view class="box-ba">
            <view class="min-box">
              <image src="../../static/imgs/vipxz.png" mode=""></image>
            </view>
            <view class="">会员特权</view>
          </view>
          <view class="box-ba">
            <view class="min-box">
              <image src="../../static/imgs/vipxz.png" mode=""></image>
            </view>
            <view class="">会员特权</view>
          </view>
          <view class="box-ba">
            <view class="min-box">
              <image src="../../static/imgs/vipxz.png" mode=""></image>
            </view>
            <view class="">会员特权</view>
          </view>
          <view class="box-ba">
            <view class="min-box">
              <image src="../../static/imgs/vipxz.png" mode=""></image>
            </view>
            <view class="">会员特权</view>
          </view>
          <view class="box-ba">
            <view class="min-box">
              <image src="../../static/imgs/vipxz.png" mode=""></image>
            </view>
            <view class="">会员特权</view>
          </view>
          <view class="box-ba">
            <view class="min-box">
              <image src="../../static/imgs/vipxz.png" mode=""></image>
            </view>
            <view class="">会员特权</view>
          </view>
        </view>
      </view>
      <view style="height: 340px; width: 100%;"></view>
      <view class="bottom-box">
        <view class="bottom-bai-box">
          <view class="b-top-bt">
            <view class="title">每日任务</view>
            <view class="times">每天04:00更新</view>
          </view>
          <view class="b-top-bt" style="margin: 10px auto;  ">
            <view class="disa">
              <view class="btimg">
                <image src="../../static/imgs/dljf.png" mode=""></image>
              </view>
              <view class="an-title">每日登录</view>
            </view>
            <view class="anniu"> 去完成 </view>
          </view>
          <view class="b-top-bt" style="margin: 10px auto;  ">
            <view class="disa">
              <view class="btimg">
                <image src="../../static/imgs/dljf.png" mode=""></image>
              </view>

              <view class="an-title">每日登录</view>
            </view>
            <view class="anniu"> 去完成 </view>
          </view>
          <view class="b-top-bt" style="margin: 10px auto;  ">
            <view class="disa">
              <view class="btimg">
                <image src="../../static/imgs/dljf.png" mode=""></image>
              </view>
              <view class="an-title">每日登录</view>
            </view>
            <view class="anniu"> 去完成 </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: '',


    }
  },

  components: {

  },
  methods: {
    goback() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  background: #2F3648;
  height: 100vh;
}

.container {
  width: 100%;

  box-sizing: border-box;
  padding-top: 88px;
}

.my-header {
  width: 100%;
  height: 88px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000;
  box-sizing: border-box;
  padding: 0px 15px;
  padding-top: 40px;

  .my-icons {
    width: 20px;

  }

  position: fixed;
  top: 0px;
}

.top-box {
  width: 90%;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 20px;
  background: linear-gradient(90deg, #EEF4FF 0%, #AEC9FF 100%);
  margin: 10px auto;
}

.b-top {
  color: #2F72F7;
  display: flex;
  justify-content: space-between;
}

.right-img {
  width: 80px;
  height: 80px;

  image {
    width: 100%;
    height: 100%;
  }
}

.title-size {
  font-weight: bold;
  font-size: 18px;
}

.min-size {
  font-size: 12px;
}

.c-box {
  width: 90%;
  box-sizing: border-box;
  padding: 15px;
  margin: 20px auto;
  height: 188px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 8px;
}

.title-bai {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
}

.wrap-box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

}

.box-ba {
  width: 25%;
  text-align: center;
  margin: 10px auto;
  color: #ffffff;
  font-size: 12px;
}

.min-box {
  width: 30px;
  height: 30px;
  margin: 5px auto;

  image {
    width: 100%;
    height: 100%;
  }
}

.bottom-box {
  background: #F3F5F9;
  width: 100%;
  border-radius: 16px 16px 0px 0px;
  box-sizing: border-box;
  padding: 15px;
  position: fixed;
  bottom: 0px;
  height: 340px;

}

.bottom-bai-box {
  width: 100%;
  border-radius: 8px;
  background: #ffffff;
  box-sizing: border-box;
  padding: 10px;



}

.b-top-bt {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.times {
  font-size: 12px;
  color: #999999;
}

.btimg {

  image {
    width: 44px;
    height: 44px;
  }

}

.anniu {
  width: 70px;
  height: 30px;
  background: #EB3E67;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: bold;

}

.disa {
  display: flex;
  align-items: center;
  justify-content: center;
}

.an-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
  margin-left: 5px;
}
</style>