57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
Vue
<script setup>
|
||
defineProps({
|
||
variant: {
|
||
type: String,
|
||
default: "gold",
|
||
},
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<view class="exchange-notice" :class="`exchange-notice--${variant}`">
|
||
<image
|
||
src="https://static.shelingxingqiu.com/shootmini/static/coin/icon-notice.png"
|
||
mode="aspectFit"
|
||
/>
|
||
<text>暂不支持线上兑换，请前往线下门店进行兑换。</text>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.exchange-notice {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 504rpx;
|
||
height: 40rpx;
|
||
margin: 0 auto;
|
||
padding: 0 16rpx;
|
||
box-sizing: border-box;
|
||
color: rgba(255, 255, 255, 0.65);
|
||
font-size: 20rpx;
|
||
line-height: 28rpx;
|
||
border-radius: 24rpx;
|
||
}
|
||
|
||
.exchange-notice--gold {
|
||
border: 2rpx solid rgba(255, 217, 71, 0.28);
|
||
background-color: rgba(255, 217, 71, 0.05);
|
||
}
|
||
|
||
.exchange-notice--red {
|
||
width: 492rpx;
|
||
height: 44rpx;
|
||
margin: 0 0 0 40rpx;
|
||
border: none;
|
||
background-color: rgba(255, 96, 96, 0.3);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.exchange-notice > image {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
margin-right: 8rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
</style>
|