mall-front-app/sheep/components/s-signup-modal/s-signup-modal.vue

<template>
	<!-- 规格弹窗 -->
	<su-popup :show="show"  @close="colseSignUpModal"  type="center" showClose round="10">
		<view class="model-box ss-flex-col">
			<view class="ss-m-t-56 ss-flex-col ss-col-center">
				<text class="cicon-check-round"></text>
				<view class="score-title">恭喜！自动签到成功！</view>
				<view class="model-title ss-flex ss-col-center ss-m-t-22 ss-m-b-30">
					获得每日签到{{state.social}}点身价
				</view>
				<view class="model-title ss-flex ss-col-center ss-m-b-30" v-if="state.upgradeOrNot ">
					您已升级等级为{{ state.socialStatusName }}
				</view>
			</view>
			<view class="model-bg ss-flex-col ss-col-center ss-row-right">
				<view class="ss-m-b-40">
					<button class="ss-reset-button confirm-btn">去领得更多福利</button>
				</view>
			</view>
		</view>
	</su-popup>
</template>

<script setup>
import {
	computed,
	reactive,
	ref
} from 'vue';
import sheep from '@/sheep';

import {
	colseSignUpModal,
	showSignUpModal
} from '@/sheep/hooks/useModal';
const show = computed(() => sheep.$store('modal').signUp);
const state = computed(() => sheep.$store('modal').signUpInfo)
</script>

<style lang="scss" scoped>
.model-box {
		width: 520rpx;
		// height: 590rpx;
		background: linear-gradient(177deg, #ff6000 0%, #fe832a 100%);
		// background: linear-gradient(177deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		border-radius: 10rpx;

		.cicon-check-round {
			font-size: 70rpx;
			color: #fff;
		}

		.score-title {
			font-size: 34rpx;
			font-family: OPPOSANS;
			font-weight: 500;
			color: #fcff00;
		}

		.model-title {
			font-size: 28rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.model-bg {
			width: 520rpx;
			height: 6.75rem;
			background-size: 100% 100%;
			background-image: v-bind(headerBg);
			background-repeat: no-repeat;
			border-radius: 0 0 10rpx 10rpx;

			.title {
				font-size: 34rpx;
				font-weight: bold;
				// color: var(--ui-BG-Main);
				color: #ff6000;
			}
			.subtitle {
				font-size: 26rpx;
				font-weight: 500;
				color: #999999;
			}
			.cancel-btn {
				width: 220rpx;
				height: 70rpx;
				border: 2rpx solid #ff6000;
				border-radius: 35rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #ff6000;
				line-height: normal;
				margin-right: 10rpx;
			}
			.confirm-btn {
				width: 300rpx;
				height: 70rpx;
				background: linear-gradient(90deg, #ff6000, #fe832a);
				box-shadow: 0 0.2em 0.5em rgba(#ff6000, 0.4);
				border-radius: 35rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: normal;
			}
		}
	}
</style>