<template>
  <view class="all">
    <view class="partOne">
        <view class="partOne">
            <view class="one_left">
                <view class="type">最大字数最大字</view>
                <view class="price">
                    30<span>元</span>
                </view>
                <view class="price_desc">满130可用</view>
            </view>
            <view class="one_right">
                <view class="right_top">
                    <view class="info">
                        <view class="title">最大字数最大字数最大</view>
                        <view class="time">有效期至2022.07.24.17:20</view>
                    </view>
                    <view class="action">
                        <button class="gouse">去使用</button>
                    </view>
                </view>
                <view class="right_bottom">
                    <view class="more_info" @click="openDetail">
                        <view class="desc">最大字数最大字数最大字数最</view>
                        <image class="arrow-right-select" :src="'../../static/imgs/jiantouhei.png'" />
                    </view>
                </view>
            </view>

        </view>
        <view class="partTwo" v-if="detailFlag" :key="twokey">
            
        </view>
        <view class="partThree" v-if="!status">

        </view>
    </view>
  </view>
</template>

<script>
export default {
    data(){
        return {
            detailFlag:false,
            status:true,
            twokey:0
        }
    },
    methods:{
        openDetail(){
            this.detailFlag = !this.detailFlag 
            this.$nextTick(()=>{
                this.twokey++
            })
        }
    }

}   
</script>

<style lang="scss" scoped>
.all {
    .partOne {
        width: 100%;
        height: 241rpx;
        
        .partOne {
             width: 100%;
             height: 100%;
             display: flex;
             justify-content: space-between;
             align-items: center;
             position: relative;
             background: radial-gradient(circle at right top, transparent 9px,  #FFFFFF 0) top left / 178rpx 51% no-repeat,
               radial-gradient(circle at right bottom, transparent 9px,  #FFFFFF 0) bottom left / 178rpx 51% no-repeat,
               radial-gradient(circle at left top, transparent 9px, #FFFFFF 0) top right / 510rpx 51% no-repeat,
               radial-gradient(circle at left bottom, transparent 9px, #FFFFFF 0) bottom right / 510rpx 51% no-repeat;
             filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000));
             .one_left {
                height: 100%;
                width: 154rpx;
                .type {
                    padding: 2rpx 10rpx;
                    max-width: 154rpx;
                    text-align: center;
                    height: 28rpx;
                    font-size: 20rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    background: linear-gradient(90deg, #75A2FF 0%, #B6CEFF 100%);
                    color: #FFFFFF;
                    line-height: 28rpx;
                }
                .price{
                    width: 178rpx;
                    height: 79rpx;
                    font-size: 56rpx;
                    font-family: Futura-Medium, Futura;
                    font-weight: 500;
                    color: #0050F6;
                    line-height: 74rpx;
                    margin: 0 auto;
                    text-align: center;
                    margin-top: 40rpx;
                    span {
                        height: 34rpx;
                        font-size: 24rpx;
                        font-family: Futura-Medium, Futura;
                        font-weight: 500;
                        color: #0050F6;
                        line-height: 30rpx;
                    }
                }
                .price_desc {
                    height: 28rpx;
                    font-size: 20rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #0050F6;
                    line-height: 28rpx;
                    width: 178rpx;
                    text-align: center;
                }
             }
            .one_right {
                height: 198rpx;
                width: calc(510rpx - 38rpx);
                .right_top {
                    display: flex;
                    justify-content: space-between;
                    align-items: flex-end;
                    padding-top: 42rpx;
                    padding-bottom: 22rpx;
                    margin-right: 32rpx;
                    border-bottom: 1rpx solid #ECECEC;
                    .info {
                        .title {
                            max-width: 332rpx;
                            height: 40rpx;
                            font-size: 28rpx;
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: #333333;
                            line-height: 40rpx;
                        }
                        .time {
                            height: 28rpx;
                            font-size: 20rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                            margin-top: 8rpx;
                            line-height: 28rpx;
                        }
                    }
                    .action {
                        .gouse{
                            width: 128rpx;
                            height: 52rpx;
                            background: #0050F6;
                            border-radius: 2rpx;
                            font-size: 24rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #FFFFFF;
                            line-height: 52rpx;
                        }
                    }
                }
                .right_bottom {
                    padding-top: 22.96rpx;
                    margin-right: 32rpx;
                    .more_info {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        .desc {
                            max-width: 261rpx;
                            height: 28rpx;
                            font-size: 20rpx;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #666666;
                            line-height: 28rpx;
                        }
			            .arrow-right-select {
                            margin-left: 8rpx;
			            	width: 8.27rpx;
			            	height: 12.68rpx;
			            }
                    }
                }
             }
        }
        .partOne::before {
          content: '';
          height: 198rpx;
          border: 1rpx dashed #F6F6F6;
          position: absolute;
          left: 176rpx;
          top: 0;
          bottom: 0;
          margin: auto;
        }
        .partTwo {
            transform: translateZ(0);
             width: 100%;
             height: 300rpx;
             position: relative; 
             background: radial-gradient(circle at right top, transparent 10px,  #FFFFFF 0) top left / 180rpx 51% no-repeat,
               radial-gradient(circle at right bottom, transparent 10px,  #FFFFFF 0) bottom left / 180rpx 51% no-repeat,
               radial-gradient(circle at left top, transparent 10px, #FFFFFF 0) top right / 512rpx 51% no-repeat,
               radial-gradient(circle at left bottom, transparent 10px, #FFFFFF 0) bottom right / 512rpx 51% no-repeat;
             filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000)); 
        }
        .partTwo::before {
          content: '';
          height: 1rpx;
          width: 122rpx;
          border: 1rpx dashed #F4F4F4;
          position: absolute;
          left: 33.75rpx;
          top: -296rpx;
          bottom: 0;
          margin: auto;
        }
        .partTwo::after {
          content: '';
          height: 1rpx;
          width: 460rpx;
          border: 1rpx dashed #F4F4F4;
          position: absolute;
          left: 196.75rpx;
          top: -296rpx;
          bottom: 0;
          margin: auto;
        }
        .partThree {
            width: 100%;
            height: 72rpx;
            position: relative;
            background: radial-gradient(circle at right top, transparent 9px,  #E9E9E9 0) top left / 180rpx 51% no-repeat,
              radial-gradient(circle at right bottom, transparent 0px,  #E9E9E9 0) bottom left / 180rpx 51% no-repeat,
              radial-gradient(circle at left top, transparent 9px, #E9E9E9 0) top right / 512rpx 51% no-repeat,
              radial-gradient(circle at left bottom, transparent 0px, #E9E9E9 0) bottom right / 512rpx 51% no-repeat;
            filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000));
        }
    }
}
</style>