feat: 优化首页、个人中心页面 UI
This commit is contained in:
richarjiang
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<view class="studio-info">
|
||||
<text class="section-title">来工作室坐坐</text>
|
||||
<!-- Address + Chat row -->
|
||||
<view class="location-row">
|
||||
<view class="location-left" @tap="handleAddressTap">
|
||||
<view class="location-icon" />
|
||||
<view class="location-content">
|
||||
<text class="location-label">场馆地址</text>
|
||||
<text class="location-text">
|
||||
@@ -12,7 +12,7 @@
|
||||
</view>
|
||||
</view>
|
||||
<button class="chat-btn" open-type="contact">
|
||||
<view class="chat-icon" />
|
||||
<text>联系老师</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
@@ -27,7 +27,6 @@
|
||||
@tap="previewPhoto(idx)"
|
||||
>
|
||||
<image class="gallery-image" :src="photo" mode="aspectFill" />
|
||||
<view class="gallery-overlay" />
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -88,179 +87,15 @@ function copyAddress() {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.studio-info {
|
||||
margin: 16rpx 24rpx 0;
|
||||
background: #ffffff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
/* ── Location row ── */
|
||||
.location-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 28rpx 32rpx 24rpx;
|
||||
gap: 24rpx;
|
||||
}
|
||||
|
||||
.location-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12rpx;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.location-content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.location-label {
|
||||
display: block;
|
||||
font-size: 22rpx;
|
||||
color: #b39a92;
|
||||
letter-spacing: 2rpx;
|
||||
margin-bottom: 6rpx;
|
||||
}
|
||||
|
||||
.location-text {
|
||||
font-size: 26rpx;
|
||||
color: #5f5955;
|
||||
line-height: 1.6;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* ── Gallery ── */
|
||||
.gallery-block {
|
||||
padding: 6rpx 0 28rpx;
|
||||
}
|
||||
|
||||
.gallery-scroll {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gallery-track {
|
||||
display: flex;
|
||||
gap: 14rpx;
|
||||
padding: 0 32rpx;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
position: relative;
|
||||
width: 192rpx;
|
||||
height: 108rpx;
|
||||
border-radius: 14rpx;
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
background: linear-gradient(135deg, #eadfd8 0%, #d5c0b4 100%);
|
||||
box-shadow: 0 8rpx 18rpx rgba(124, 95, 82, 0.1);
|
||||
}
|
||||
|
||||
.gallery-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gallery-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(38, 28, 24, 0.2) 100%),
|
||||
linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 48%);
|
||||
}
|
||||
|
||||
/* ── Icons ── */
|
||||
.location-icon {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba($brand-color, 0.06);
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
|
||||
// 定位图标 — 圆头 + 尖尾
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 14rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 18rpx;
|
||||
height: 18rpx;
|
||||
border: 2.5rpx solid $brand-color;
|
||||
border-radius: 50% 50% 50% 0;
|
||||
transform: translateX(-50%) rotate(-45deg);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
// 中心白点
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 21rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 6rpx;
|
||||
height: 6rpx;
|
||||
background: $brand-color;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-btn {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba($brand-color, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.chat-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.chat-icon {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
border-radius: 50%;
|
||||
background: rgba($brand-color, 0.06);
|
||||
position: relative;
|
||||
|
||||
// 消息气泡
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 26rpx;
|
||||
height: 20rpx;
|
||||
border: 2.5rpx solid $brand-color;
|
||||
border-radius: 6rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
// 气泡尾巴
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 12rpx;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 5rpx solid transparent;
|
||||
border-right: 5rpx solid transparent;
|
||||
border-top: 7rpx solid $brand-color;
|
||||
}
|
||||
}
|
||||
.studio-info { margin: 36rpx 32rpx 0; }
|
||||
.section-title { display: block; margin-bottom: 20rpx; font-size: 30rpx; font-weight: 500; color: #514943; }
|
||||
.location-row { display: flex; align-items: center; justify-content: space-between; gap: 20rpx; margin-bottom: 20rpx; }
|
||||
.location-left, .location-content { flex: 1; min-width: 0; }
|
||||
.location-label { display: block; font-size: 21rpx; color: #8b817b; margin-bottom: 6rpx; }
|
||||
.location-text { font-size: 24rpx; color: #6f655e; line-height: 1.7; overflow-wrap: anywhere; }
|
||||
.chat-btn { flex-shrink: 0; margin: 0; padding: 0 20rpx; line-height: 64rpx; font-size: 23rpx; border: none; border-radius: 999rpx; background: #f0eae4; color: #78675c; &::after { border: none; } }
|
||||
.gallery-scroll { width: 100%; }
|
||||
.gallery-track { display: inline-flex; gap: 16rpx; }
|
||||
.gallery-item { width: 264rpx; height: 180rpx; border-radius: 20rpx; overflow: hidden; flex-shrink: 0; background: #e9e1d8; }
|
||||
.gallery-image { width: 100%; height: 100%; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user