feat: 替换sass版本,定义全局样式,实现简单的页面布局操作,比如颜色、边距、圆角等
This commit is contained in:
@@ -63,5 +63,5 @@ const props = defineProps({
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -17,14 +17,14 @@
|
||||
left: 24rpx;
|
||||
font-size: 20rpx;
|
||||
color: #999999;
|
||||
background: #ffffff;
|
||||
background-color: $uni-bg-color;
|
||||
padding: 0 8rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.date-box {
|
||||
padding: 20rpx 24rpx;
|
||||
background: #ffffff;
|
||||
background-color: $uni-bg-color;
|
||||
border-radius: 16rpx;
|
||||
border: 2rpx solid #f0f0f0;
|
||||
display: flex;
|
||||
@@ -41,7 +41,7 @@
|
||||
.date-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
color: #333333;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.day-text {
|
||||
@@ -61,4 +61,4 @@
|
||||
.nights-text {
|
||||
font-size: 24rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -369,5 +369,5 @@ defineExpose({
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
.header-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
color: $uni-text-color;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
}
|
||||
@@ -64,7 +64,7 @@
|
||||
.goods-title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
color: $uni-text-color;
|
||||
line-height: 22px;
|
||||
margin-bottom: 8px;
|
||||
display: -webkit-box;
|
||||
@@ -79,7 +79,7 @@
|
||||
margin-bottom: 12px;
|
||||
|
||||
.currency {
|
||||
font-size: 14px;
|
||||
font-size: $uni-font-size-base;
|
||||
color: #ff6b35;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -92,7 +92,7 @@
|
||||
}
|
||||
|
||||
.price-desc {
|
||||
font-size: 14px;
|
||||
font-size: $uni-font-size-base;
|
||||
color: #999;
|
||||
font-weight: 400;
|
||||
margin-left: 12px;
|
||||
@@ -107,9 +107,9 @@
|
||||
}
|
||||
|
||||
.service-title {
|
||||
font-size: 14px;
|
||||
font-size: $uni-font-size-base;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.goods-service-item {
|
||||
@@ -120,12 +120,12 @@
|
||||
|
||||
.service-label,
|
||||
.service-value {
|
||||
font-size: 14px;
|
||||
font-size: $uni-font-size-base;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.service-label {
|
||||
color: #333;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.service-value {
|
||||
@@ -166,8 +166,8 @@
|
||||
}
|
||||
|
||||
.total-count {
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
font-size: $uni-font-size-sm;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.total-price {
|
||||
@@ -178,7 +178,7 @@
|
||||
|
||||
&::before {
|
||||
content: "¥";
|
||||
font-size: 12px;
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -47,9 +47,8 @@ const facilitiesList = computed(() => {
|
||||
|
||||
return [];
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
color: $uni-text-color;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
flex: 0 280px;
|
||||
@@ -54,8 +54,8 @@
|
||||
border-radius: 6px;
|
||||
|
||||
.facility-text {
|
||||
font-size: 12px;
|
||||
color: #333;
|
||||
font-size: $uni-font-size-sm;
|
||||
color: $uni-text-color;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -349,5 +349,5 @@ const handleDateSelect = (data) => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
@use "sass:color";
|
||||
|
||||
$button-color: #00a6ff;
|
||||
$button-hover-color: color.scale($button-color, $lightness: -16%);
|
||||
|
||||
.goods-container {
|
||||
display: flex;
|
||||
@@ -37,8 +34,8 @@ $button-hover-color: color.scale($button-color, $lightness: -16%);
|
||||
flex-shrink: 0;
|
||||
|
||||
.module-title {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-size: $uni-font-size-base;
|
||||
color: $uni-text-color;
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
margin-left: 4px;
|
||||
@@ -47,7 +44,7 @@ $button-hover-color: color.scale($button-color, $lightness: -16%);
|
||||
|
||||
.module-desc {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
font-size: $uni-font-size-sm;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
margin-top: 4px;
|
||||
@@ -94,8 +91,8 @@ $button-hover-color: color.scale($button-color, $lightness: -16%);
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-size: $uni-font-size-base;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.price {
|
||||
@@ -106,7 +103,7 @@ $button-hover-color: color.scale($button-color, $lightness: -16%);
|
||||
|
||||
&::before {
|
||||
content: "¥";
|
||||
font-size: 12px;
|
||||
font-size: $uni-font-size-sm;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -121,51 +118,12 @@ $button-hover-color: color.scale($button-color, $lightness: -16%);
|
||||
justify-content: center;
|
||||
border-radius: 50px;
|
||||
height: 42px;
|
||||
font-size: 14px;
|
||||
font-size: $uni-font-size-base;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
letter-spacing: 0.5px;
|
||||
margin-left: auto;
|
||||
|
||||
// 按钮波纹效果
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s, height 0.6s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
$button-hover-color 0%,
|
||||
color.scale($button-hover-color, $lightness: -11.9%) 100%
|
||||
);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba($button-color, 0.4);
|
||||
|
||||
&::before {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 8px rgba($button-color, 0.3);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba($button-color, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -66,5 +66,5 @@ watch(
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -16,5 +16,5 @@ defineProps({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -16,5 +16,5 @@ defineProps({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
overflow-x: hidden; // ✅ 防止横向撑开
|
||||
|
||||
text {
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
font-size: $uni-font-size-base;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -244,5 +244,5 @@ defineExpose({ focusInput });
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 22px;
|
||||
background-color: #ffffff;
|
||||
background-color: $uni-bg-color;
|
||||
box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
|
||||
margin: 0 12px;
|
||||
margin-bottom: 8px;
|
||||
@@ -29,12 +29,12 @@
|
||||
.hold-to-talk-button {
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
color: #333333;
|
||||
color: $uni-text-color;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #ffffff;
|
||||
background-color: $uni-bg-color;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
@@ -802,5 +802,5 @@ const resetConfig = () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -39,5 +39,5 @@ const sendReply = (text) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
border-radius: 8px;
|
||||
margin: 4px;
|
||||
box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
|
||||
background-color: #ffffff;
|
||||
background-color: $uni-bg-color;
|
||||
padding: 2px 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
.more-tips-item-title {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
font-size: $uni-font-size-sm;
|
||||
color: #00a6ff;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
|
||||
@@ -96,5 +96,5 @@ const initData = () => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
|
||||
text {
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
font-size: $uni-font-size-sm;
|
||||
color: #201f32;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
@@ -5,5 +5,5 @@
|
||||
<script></script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -33,5 +33,5 @@ const closeDrawer = (e) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -49,5 +49,5 @@ const backgroundStyle = computed(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -50,5 +50,5 @@ onUnmounted(() => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
.title {
|
||||
font-size: 18px;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
|
||||
@@ -115,5 +115,5 @@ const handleLogout = () => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
|
||||
.value {
|
||||
@@ -59,7 +59,7 @@
|
||||
height: 42px;
|
||||
margin-top: 40px;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
color: $uni-text-color;
|
||||
border-radius: 8rpx;
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -45,5 +45,5 @@ const handleClick = (item) => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -27,8 +27,8 @@
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
background-color: #ffeb00;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
color: $uni-text-color;
|
||||
font-size: $uni-font-size-base;
|
||||
font-weight: 500;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
|
||||
@@ -41,5 +41,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
}
|
||||
|
||||
.tag-item {
|
||||
background-color: #ffffff;
|
||||
background-color: $uni-bg-color;
|
||||
border-radius: 8px;
|
||||
padding: 4px 10px;
|
||||
margin-right: 8px;
|
||||
@@ -17,5 +17,5 @@
|
||||
|
||||
.tag-text {
|
||||
color: #00a6ff; /* 蓝色文字,可根据设计调整 */
|
||||
font-size: 14px;
|
||||
font-size: $uni-font-size-base;
|
||||
}
|
||||
|
||||
@@ -26,5 +26,5 @@ const props = defineProps({
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -69,5 +69,5 @@ const placeOrderHandle = (item) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
width: 188px;
|
||||
background-color: #ffffff;
|
||||
background-color: $uni-bg-color;
|
||||
border-radius: 10px;
|
||||
margin-right: 8px;
|
||||
padding-bottom: 12px;
|
||||
@@ -26,7 +26,7 @@
|
||||
left: 8px;
|
||||
background: #ffe7b2;
|
||||
color: #b97a00;
|
||||
font-size: 12px;
|
||||
font-size: $uni-font-size-sm;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
z-index: 2;
|
||||
|
||||
@@ -33,5 +33,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -38,5 +38,5 @@ const sendReply = (item) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
align-items: start;
|
||||
width: 188px;
|
||||
height: 154px;
|
||||
background-color: #ffffff;
|
||||
background-color: $uni-bg-color;
|
||||
border-radius: 10px;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
@@ -25,8 +25,8 @@
|
||||
padding: 12px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
color: #333333;
|
||||
font-size: $uni-font-size-sm;
|
||||
color: $uni-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -71,5 +71,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -62,5 +62,5 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -67,5 +67,5 @@ const placeOrderHandle = (item) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
align-items: start;
|
||||
width: 188px;
|
||||
// height: 244px;
|
||||
background-color: #ffffff;
|
||||
background-color: $uni-bg-color;
|
||||
border-radius: 10px;
|
||||
margin-right: 8px;
|
||||
padding-bottom: 12px;
|
||||
@@ -25,7 +25,7 @@
|
||||
left: 8px;
|
||||
background: #ffe7b2;
|
||||
color: #b97a00;
|
||||
font-size: 12px;
|
||||
font-size: $uni-font-size-sm;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
z-index: 2;
|
||||
|
||||
@@ -22,5 +22,5 @@ const props = defineProps({
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -37,5 +37,5 @@ const sendReply = (item) => {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
|
||||
@@ -46,8 +46,8 @@
|
||||
.overlay-text {
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
font-size: 12px;
|
||||
font-size: $uni-font-size-sm;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,6 +65,6 @@ onUnmounted(() => {
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #ffffff;
|
||||
background-color: $uni-bg-color;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,19 +3,19 @@
|
||||
<view class="demo-header">
|
||||
<text class="demo-title">AgreePopup 组件演示</text>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="demo-content">
|
||||
<button class="demo-btn" @click="showPopup">显示用户协议弹窗</button>
|
||||
|
||||
|
||||
<view class="demo-info">
|
||||
<text class="info-title">组件状态:</text>
|
||||
<text class="info-text">弹窗可见:{{ popupVisible }}</text>
|
||||
<text class="info-text">用户操作:{{ userAction }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- AgreePopup 组件 -->
|
||||
<AgreePopup
|
||||
<AgreePopup
|
||||
:visible="popupVisible"
|
||||
title="温馨提示"
|
||||
@agree="handleAgree"
|
||||
@@ -26,36 +26,36 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import AgreePopup from './index.vue'
|
||||
import { ref } from "vue";
|
||||
import AgreePopup from "./index.vue";
|
||||
|
||||
// 响应式数据
|
||||
const popupVisible = ref(false)
|
||||
const userAction = ref('无')
|
||||
const popupVisible = ref(false);
|
||||
const userAction = ref("无");
|
||||
|
||||
// 方法定义
|
||||
const showPopup = () => {
|
||||
popupVisible.value = true
|
||||
userAction.value = '显示弹窗'
|
||||
}
|
||||
popupVisible.value = true;
|
||||
userAction.value = "显示弹窗";
|
||||
};
|
||||
|
||||
const handleAgree = () => {
|
||||
popupVisible.value = false
|
||||
userAction.value = '用户同意协议'
|
||||
console.log('用户同意了协议')
|
||||
}
|
||||
popupVisible.value = false;
|
||||
userAction.value = "用户同意协议";
|
||||
console.log("用户同意了协议");
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
popupVisible.value = false
|
||||
userAction.value = '用户关闭弹窗'
|
||||
console.log('用户关闭了弹窗')
|
||||
}
|
||||
popupVisible.value = false;
|
||||
userAction.value = "用户关闭弹窗";
|
||||
console.log("用户关闭了弹窗");
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
popupVisible.value = false
|
||||
userAction.value = '用户取消操作'
|
||||
console.log('用户取消了操作')
|
||||
}
|
||||
popupVisible.value = false;
|
||||
userAction.value = "用户取消操作";
|
||||
console.log("用户取消了操作");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -63,27 +63,27 @@ const handleCancel = () => {
|
||||
padding: 20px;
|
||||
min-height: 100vh;
|
||||
background: #f5f5f5;
|
||||
|
||||
|
||||
.demo-header {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
|
||||
|
||||
.demo-title {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.demo-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
|
||||
.demo-btn {
|
||||
width: 200px;
|
||||
height: 44px;
|
||||
background: #007AFF;
|
||||
background: #007aff;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
@@ -91,24 +91,24 @@ const handleCancel = () => {
|
||||
font-weight: 500;
|
||||
margin-bottom: 40px;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
&:hover {
|
||||
background: #0056CC;
|
||||
background: #0056cc;
|
||||
}
|
||||
|
||||
|
||||
&:active {
|
||||
background: #004499;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.demo-info {
|
||||
background: #ffffff;
|
||||
background-color: $uni-bg-color;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
min-width: 300px;
|
||||
|
||||
|
||||
.info-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
@@ -116,13 +116,13 @@ const handleCancel = () => {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
|
||||
.info-text {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@@ -83,5 +83,5 @@ defineExpose({
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
</style>
|
||||
@@ -1,83 +1,83 @@
|
||||
// AgreePopup 组件样式
|
||||
.agree-popup {
|
||||
width: 327px;
|
||||
background: #ffffff;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
width: 327px;
|
||||
background-color: $uni-bg-color;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
||||
|
||||
// 弹窗头部
|
||||
.popup-header {
|
||||
position: relative;
|
||||
padding: 20px 20px 0 20px;
|
||||
// 弹窗头部
|
||||
.popup-header {
|
||||
position: relative;
|
||||
padding: 20px 20px 0 20px;
|
||||
|
||||
.popup-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.popup-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: $uni-text-color;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
// 弹窗内容
|
||||
.popup-content {
|
||||
padding: 12px;
|
||||
max-height: 400px; // 设置最大高度
|
||||
overflow-y: auto; // 启用垂直滚动
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
|
||||
// 自定义滚动条样式
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
background: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮区域
|
||||
.button-area {
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
// 弹窗内容
|
||||
.popup-content {
|
||||
padding: 12px;
|
||||
max-height: 400px; // 设置最大高度
|
||||
overflow-y: auto; // 启用垂直滚动
|
||||
|
||||
.confirm-btn {
|
||||
width: 148px;
|
||||
height: 44px;
|
||||
background: linear-gradient(90deg, #22a7ff 0%, #2567ff 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #0056cc;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #004499;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
// 自定义滚动条样式
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 按钮区域
|
||||
.button-area {
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.confirm-btn {
|
||||
width: 148px;
|
||||
height: 44px;
|
||||
background: linear-gradient(90deg, #22a7ff 0%, #2567ff 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
border-radius: 50px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
background: #0056cc;
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: #004499;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -146,7 +146,7 @@ getPrivacyAgreementData();
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@use "./styles/index.scss";
|
||||
@import "./styles/index.scss";
|
||||
@font-face {
|
||||
font-family: znicons;
|
||||
src: url("@/static/fonts/znicons.ttf");
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
}
|
||||
|
||||
.login-desc {
|
||||
font-size: 12px;
|
||||
font-size: $uni-font-size-sm;
|
||||
color: #1e4c69;
|
||||
line-height: 24px;
|
||||
}
|
||||
@@ -61,12 +61,12 @@
|
||||
align-items: center;
|
||||
|
||||
.login-agreement-text {
|
||||
font-size: 14px;
|
||||
font-size: $uni-font-size-base;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.login-agreement-link {
|
||||
font-size: 14px;
|
||||
font-size: $uni-font-size-base;
|
||||
color: #007aff;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user