<!--
* @Author: jiangzaicheng jiangzaicheng_jzc@163.com
* @Date: 2022-07-14 13:57:33
* @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
* @LastEditTime: 2022-08-18 10:59:51
* @FilePath: \mcep-h5\src\views\MyView\LevelSent.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="rarle">
<van-row>
<van-col span="9">
<van-icon name="arrow-left" @click="retyen()" />
</van-col>
<van-col span="15">{{ tatleName }}</van-col>
</van-row>
<div class="card">
<div class="d-flex flex-column">
<div class="d-flex p-3 text-white">
<div class="p-2 " style="width: 62px;height: 62px;">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-touxiang"></use>
</svg>
</div>
<div style="width: 100%;margin-top: 2%;margin-left: 6%;">
<div class="d-flex flex-column">
<div class="lusspolid">大熊仔
</div>
<div class="d-flex " style="width: 100%;">
<div class="live ">
二星级用户|当前成长值535</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="frist_type">
<van-row type="flex" class="vanrowFlex">
<van-col span="24" class="vanclo">我的特权</van-col>
<van-row type="flex" gutter="10" justify="center" style="width: 90%; margin: 0px auto;">
<van-col span="6"><img class="img" src="../../assets/images/DGKHBF.png"></van-col>
<van-col span="6"><img class="img" src="../../assets/images/DGKHBF.png"></van-col>
<van-col span="6"><img class="img" src="../../assets/images/DGKHBF.png"></van-col>
<van-col span="6"><img class="img" src="../../assets/images/DGKHBF.png"></van-col>
</van-row>
<van-row type="flex" gutter="10" style="width: 90%; margin: 0px auto;">
<van-col span="6" style="font-size:10px;text-align: center;">我的特权</van-col>
<van-col span="6" style="font-size:10px;text-align: center;">我的特权</van-col>
<van-col span="6" style="font-size:10px;text-align: center;">我的特权</van-col>
<van-col span="6" style="font-size:10px;text-align: center;">我的特权</van-col>
</van-row>
<van-row type="flex" gutter="10" style="width: 90%; margin: 0px auto;">
<van-col span="6" class="third-style">
</van-col>
<van-col span="6" class="third-style">
+0.01</van-col>
<van-col span="6" class="third-style">
-0.01</van-col>
<van-col span="6" class="third-style">专属
</van-col>
</van-row>
</van-row>
<van-row type="flex" class="">
<van-col span="24" >我的特权</van-col>
<div>
</div>
</van-row>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ProductData } from '@/model/entity/ProductData'
//import { defineComponent } from 'vue';
@Component({
name: "LevelSent",
})
export default class LevelSent extends Vue {
tatleName = "等级权限详情";
imageBackage: any = require('@/assets/images/backageImg.png');
//返回上一级
retyen() {
this.$router.back();
}
//数表
tableData= [{
level: '免费转账',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
level: '客户',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
level: '存款加息',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
level: '贷款减息',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}]
data: any = [
{
key: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',
},
{
key: 2,
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',
},
{
key: 3,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
description: 'My name is Joe Black, I am 32 years old, living in Sidney No. 1 Lake Park.',
},
];
}
</script>
<style scoped lang="scss">
.card {
//background-image: url("../../assets/images/mycard.png");
background-color: #ffc14a;
position: absolute;
top: 12%;
left: 4%;
right: 3%;
width: 89%;
height: 11%;
margin: 2% auto;
border-radius: 15px;
display: flex;
font-weight: 400;
font-style: normal;
}
.last {
position: absolute;
height: 100-20vh;
background: #ffffff;
overflow: visible;
}
// .frist_type {
// // border: 1px solid;
// width: 100%;
// height: 100%;
// border-radius: 70px 70px 0px 0px;
// position: absolute;
// top: 20%;
// background-color: #fff;
// }
.frist_type {
margin-top: 15%;
background-image: url('../../assets/images/backageImg.png');
background-size: 100% 100%;
height: 85%;
}
.frist {
margin-left: 6%;
text-rendering: optimizelegibility;
font-feature-settings: "kern";
font-kerning: normal;
font-size: 14px;
}
.second {
//margin-left: 6%;
width: 90%;
margin: 0px auto;
}
.third {
width: 90%;
margin: 0px auto;
// margin-left: 6%;
font-size: 10px;
color: rgba(0, 0, 0, 0.8);
text-rendering: optimizelegibility;
font-feature-settings: "kern";
font-kerning: normal;
}
.img {
width: 85%;
}
.van-col--9 {
margin-top: 5%;
font-size: 18px;
color: #ffffff;
}
.van-col--15 {
margin-top: 5%;
font-size: 18px;
color: #ffffff;
}
.rarle {
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(118, 190, 250, 1) 0%, rgba(54, 114, 241, 1) 99%);
}
.third-style {
font-size: 10px;
text-align: center;
color: rgb(255, 193, 74)
}
.vanrowFlex {
margin-top: 2%;
}
.lusspolid {
color: #976401;
font-size: 14px;
}
.vanclo {
margin: 20% 0% 4% 6%;
/* margin-left: 2%; */
/* margin-top: 20%; */
font-weight: 500;
font-size: 14px;
text-align: left;
}
.d-tattle {
margin-top: 28%;
}
.priductName {
padding-top: 2%;
}
.imglittle {
padding-top: 2%;
}
.litterParam {
width: 90%;
margin: 0px auto;
background-color: rgba(255, 255, 255, 1);
border: none;
border-radius: 4px;
-moz-box-shadow: 0px 0px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
height: 40px;
}
.vanrow {
margin-top: 6%;
margin-left: 2%;
}
.tatle {
width: 100%;
height: 100%;
}
.icon {
width: 40px;
height: 40px;
}
.live {
font-size: 12px;
color: #CE8B0B;
}
</style>