|
|
@@ -0,0 +1,299 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <ujp-navbar title="双11活动中奖名单"></ujp-navbar>
|
|
|
+
|
|
|
+ <view class="top">
|
|
|
+ <img class="cover" src="@/assets/img/topCover.png" alt="" />
|
|
|
+ <img class="img1" src="@/assets/img/doubleEleven3x.png" alt="" />
|
|
|
+ <img class="img2" src="@/assets/img/doubleElevenLogo.png" alt="" />
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="titleBox">
|
|
|
+ <img class="cover2" src="@/assets/img/cover2.png" alt="" />
|
|
|
+ <view class="title">
|
|
|
+ <img src="@/assets/img/winnerList.png" alt="" />
|
|
|
+ </view>
|
|
|
+ <view class="title2">
|
|
|
+ 充电七五折 快充抽免单
|
|
|
+ </view>
|
|
|
+ <view class="date">
|
|
|
+ 2024.11.10~2024.11.12
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- <view class="" style="background-color: #fff; z-index: 999; position: relative; margin-top: -220rpx;">
|
|
|
+ <view class="content" v-for="item in 20" >
|
|
|
+ 11
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <view class="listBox" >
|
|
|
+
|
|
|
+ <view class="head">
|
|
|
+ <view class="head2">
|
|
|
+
|
|
|
+ <view class="contentHead">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="content">
|
|
|
+
|
|
|
+
|
|
|
+ <view class="list">
|
|
|
+ <view class="title">
|
|
|
+ 服务费免单券 ×1
|
|
|
+ <view class="img">
|
|
|
+ <img src="@/assets/img/goldMedal.png" alt="" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="listContent">
|
|
|
+ <view class="name">
|
|
|
+ <view class="title">
|
|
|
+ 昵称
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ <view class="item"v-for="item in 4" >
|
|
|
+ 充电达人11
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="account">
|
|
|
+ <view class="title">
|
|
|
+ 账号
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ <view class="item"v-for="item in 4" >
|
|
|
+ 187****5124
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="hint">
|
|
|
+ 活动最终解释权归湖北鹏育优电新能源科技有限公司所有
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ page {
|
|
|
+ background-color: #DD3032;
|
|
|
+ padding-bottom: 100rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .top {
|
|
|
+
|
|
|
+ height: 620rpx;
|
|
|
+ .cover {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .img1 {
|
|
|
+ width: 100%;
|
|
|
+ height: 556rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 88rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .img2 {
|
|
|
+ width: 594rpx;
|
|
|
+ height: 268rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 168rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .titleBox {
|
|
|
+
|
|
|
+
|
|
|
+ position: relative;
|
|
|
+ margin-top: -248rpx;
|
|
|
+ background: linear-gradient(180deg, rgba(221, 48, 50, 0) 0%, rgba(221, 48, 50, 1) 76%);
|
|
|
+
|
|
|
+ .title {
|
|
|
+ width: 596rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ color: rgba(255, 255, 215, 1);
|
|
|
+ font-size: 18px;
|
|
|
+ position: absolute;
|
|
|
+ top: -24rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .title2 {
|
|
|
+ width: 478rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 50px;
|
|
|
+ background: linear-gradient(90deg, rgba(255, 61, 0, 1) 0%, rgba(255, 79, 63, 1) 100%);
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 140rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ color: rgba(255, 255, 215, 1);
|
|
|
+ font-size: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ position: absolute;
|
|
|
+ top: 232rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ color: rgba(255, 255, 215, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cover2 {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .listBox {
|
|
|
+ position: relative;
|
|
|
+ margin-top: -220rpx;
|
|
|
+ .head {
|
|
|
+ width: 100%;
|
|
|
+ height: 144rpx;
|
|
|
+ border-radius: 16px 16px 0px 0px;
|
|
|
+ background: linear-gradient(180deg, rgba(239, 121, 66, 1) 0%, rgba(221, 48, 50, 1) 100%);
|
|
|
+ // border: 1px solid rgba(252, 163, 131, 1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .head2 {
|
|
|
+ position: relative;
|
|
|
+ width: 702rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(145, 17, 18, 1);
|
|
|
+ text-align: center;
|
|
|
+ border: 6px solid rgba(206, 38, 37, 1);
|
|
|
+
|
|
|
+ }
|
|
|
+ .contentHead {
|
|
|
+ width: 678rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background: linear-gradient(180deg, rgba(187, 58, 60, 1) 0%, rgba(255, 255, 255, 1) 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ width: 678rpx;
|
|
|
+ border-radius: 0px 0px 12px 12px;
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ padding: 16rpx 0;
|
|
|
+ margin: -54rpx auto 0;
|
|
|
+ z-index: 999;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+
|
|
|
+ .list{
|
|
|
+ border-radius: 8px 50px 8px 8px;
|
|
|
+ background: linear-gradient(88.8deg, rgba(226,54,53,1) 1.5%,rgba(247,143,30,1) 99.88%);
|
|
|
+ margin: 24rpx;
|
|
|
+ padding: 8rpx;
|
|
|
+
|
|
|
+ .title{
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: bold;
|
|
|
+ position: relative;
|
|
|
+ .img{
|
|
|
+ width: 144rpx;
|
|
|
+ height: 144rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: -16rpx;
|
|
|
+ left: 0;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .listContent{
|
|
|
+ margin-top: 26rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: top;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .name,.account{
|
|
|
+ .title{
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ }
|
|
|
+ .value{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+
|
|
|
+ .item{
|
|
|
+ width: 240rpx;
|
|
|
+
|
|
|
+ line-height: 64rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .hint{
|
|
|
+ color: rgba(96, 2, 3, 1);
|
|
|
+
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+</style>
|
