123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- <template>
- <view class="container">
- <view class="title">身份选择</view>
- <view class="choose-identuty flex justify-between">
- <view class="item"
- :class="isDoctor ? 'border-color-custom' : 'border-unSelected' " @click="() => isDoctor = true">
- <view class="item-icon" :class="isDoctor ? 'bg-custom' : 'bg-unSelected' ">
- <u-icon name="checkmark" color="white" size="20"></u-icon>
- </view>
- <image class="item-content-icon1" src="@/static/images/phone/icon_doctor.png"></image>
- <view class="item-name">我是医生</view>
- <view class="item-desc">参与项目上传课件</view>
- </view>
- <view class="item"
- :class="!isDoctor ? 'border-color-custom' : 'border-unSelected' " @click="() => isDoctor = false">
- <view class="item-icon" :class="!isDoctor ? 'bg-custom' : 'bg-unSelected' ">
- <u-icon name="checkmark" color="white" size="20"></u-icon>
- </view>
- <image class="item-content-icon2" src="@/static/images/phone/icon_volunteer.png"></image>
- <view class="item-name">我是志愿者</view>
- <view class="item-desc">辅助医生上传课件</view>
- </view>
- </view>
- <u-button type="primay" class="btn" color="var(--phone-theme-color)" @click="next">下一步</u-button>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- isDoctor: true
- }
- },
- onLoad() {
- this.isDoctor = this.$store.state.user.loginIdentity == 0
- },
- methods: {
- next() {
- let type = this.isDoctor ? '0' : '1'
- uni.navigateTo({
- url: '/pages/phone/improve?loginIdentity=' + type
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .container {
- width: 100vw;
- height: 100vh;
- padding-top: 88rpx;
- .title {
- font-size: 40rpx;
- font-style: normal;
- font-weight: 600;
- color: black;
- text-align: center;
- }
- .choose-identuty {
- margin-top: 56rpx;
- padding: 16rpx 32rpx;
- .item {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: 330rpx;
- height: 400rpx;
- border-radius: 32rpx;
- border: 2px solid #F2F3F5;
- &-icon {
- align-self: flex-end;
- width: 60rpx;
- height: 60rpx;
- border-top-right-radius: 24rpx;
- border-bottom-left-radius: 24rpx;
- display: flex;
- justify-content: center;
- align-items: center;
- }
- &-content-icon1 {
- width: 150rpx;
- height: 150rpx;
- margin-top: 36rpx;
- }
- &-content-icon2 {
- width: 200rpx;
- height: 200rpx;
- margin-left: 40rpx;
- }
- &-name {
- margin-top: 40rpx;
- color: #1D2129;
- font-size: 32rpx;
- font-weight: 600;
- height: 48rpx;
- line-height: 48rpx;
- }
- &-desc {
- color: #86909C;
- font-size: 26rpx;
- height: 44rpx;
- line-height: 44rpx;
- }
- }
- }
- .btn {
- position: absolute;
- bottom: 0px;
- left: 40rpx;
- right: 40rpx;
- height: 88rpx;
- line-height: 88rpx;
- text-align: center;
- border-radius: 8rpx;
- color: #FFF;
- font-size: 28rpx;
- font-weight: 400;
- width: calc(100% - 80rpx);
- }
- }
- .border-unSelected {
- border-color: #F2F3F5 !important;
- }
- .bg-unSelected {
- background: #F2F3F5 !important;
- }
- </style>
|