feat: 替换sass版本,定义全局样式,实现简单的页面布局操作,比如颜色、边距、圆角等

This commit is contained in:
duanshuwen
2025-10-06 13:13:16 +08:00
parent e0f0e90635
commit c8e51e4975
108 changed files with 366 additions and 517 deletions

View File

@@ -63,5 +63,5 @@ const props = defineProps({
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -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;
}
}

View File

@@ -369,5 +369,5 @@ defineExpose({
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -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;
}
}

View File

@@ -47,9 +47,8 @@ const facilitiesList = computed(() => {
return [];
});
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -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;

View File

@@ -349,5 +349,5 @@ const handleDateSelect = (data) => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -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);
}
}
}

View File

@@ -66,5 +66,5 @@ watch(
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -16,5 +16,5 @@ defineProps({
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -16,5 +16,5 @@ defineProps({
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -8,7 +8,7 @@
overflow-x: hidden; // ✅ 防止横向撑开
text {
font-size: 14px;
color: #333333;
font-size: $uni-font-size-base;
color: $uni-text-color;
}
}

View File

@@ -244,5 +244,5 @@ defineExpose({ focusInput });
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -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;

View File

@@ -802,5 +802,5 @@ const resetConfig = () => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -39,5 +39,5 @@ const sendReply = (text) => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -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;

View File

@@ -96,5 +96,5 @@ const initData = () => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -50,7 +50,7 @@
text {
font-weight: 500;
font-size: 12px;
font-size: $uni-font-size-sm;
color: #201f32;
line-height: 16px;
}

View File

@@ -5,5 +5,5 @@
<script></script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -33,5 +33,5 @@ const closeDrawer = (e) => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -49,5 +49,5 @@ const backgroundStyle = computed(() => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -50,5 +50,5 @@ onUnmounted(() => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -15,7 +15,7 @@
.title {
font-size: 18px;
text-align: center;
color: #333333;
color: $uni-text-color;
}
.close-icon {

View File

@@ -115,5 +115,5 @@ const handleLogout = () => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -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;
}

View File

@@ -45,5 +45,5 @@ const handleClick = (item) => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -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;

View File

@@ -41,5 +41,5 @@ onMounted(() => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -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;
}

View File

@@ -26,5 +26,5 @@ const props = defineProps({
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -69,5 +69,5 @@ const placeOrderHandle = (item) => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -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;

View File

@@ -33,5 +33,5 @@ onMounted(() => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -38,5 +38,5 @@ const sendReply = (item) => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -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;
}
}
}

View File

@@ -71,5 +71,5 @@ onMounted(() => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -62,5 +62,5 @@ onMounted(() => {
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -67,5 +67,5 @@ const placeOrderHandle = (item) => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -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;

View File

@@ -22,5 +22,5 @@ const props = defineProps({
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -37,5 +37,5 @@ const sendReply = (item) => {
</script>
<style lang="scss" scoped>
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -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%;
}
}
}

View File

@@ -65,6 +65,6 @@ onUnmounted(() => {
.container {
width: 100vw;
height: 100vh;
background-color: #ffffff;
background-color: $uni-bg-color;
}
</style>

View File

@@ -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;
}

View File

@@ -83,5 +83,5 @@ defineExpose({
</script>
<style scoped lang="scss">
@use "./styles/index.scss";
@import "./styles/index.scss";
</style>

View File

@@ -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);
}
}
}
}

View File

@@ -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");

View File

@@ -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;
}