初始化参股
This commit is contained in:
125
前端/components/before-after/before-after.uvue
Normal file
125
前端/components/before-after/before-after.uvue
Normal file
@@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<view class="before-after">
|
||||
<view class="ba-title" v-if="showTitle">
|
||||
<text class="ba-title-text">翻新前后对比</text>
|
||||
</view>
|
||||
|
||||
<view class="ba-container">
|
||||
<!-- 翻新前 -->
|
||||
<view class="ba-item" @click="previewImage(beforeImage, 'before')">
|
||||
<view class="ba-label before-label">
|
||||
<text class="ba-label-text">翻新前</text>
|
||||
</view>
|
||||
<image
|
||||
class="ba-image"
|
||||
:src="beforeImage"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
|
||||
<!-- 箭头 -->
|
||||
<view class="ba-arrow">
|
||||
<text class="ba-arrow-text">→</text>
|
||||
</view>
|
||||
|
||||
<!-- 翻新后 -->
|
||||
<view class="ba-item" @click="previewImage(afterImage, 'after')">
|
||||
<view class="ba-label after-label">
|
||||
<text class="ba-label-text">翻新后</text>
|
||||
</view>
|
||||
<image
|
||||
class="ba-image"
|
||||
:src="afterImage"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
const props = defineProps<{
|
||||
beforeImage : string
|
||||
afterImage : string
|
||||
showTitle ?: boolean
|
||||
}>()
|
||||
|
||||
// 预览图片
|
||||
const previewImage = (url : string, type : string) => {
|
||||
const urls = type == 'before' ? [props.beforeImage] : [props.afterImage]
|
||||
uni.previewImage({
|
||||
current: url,
|
||||
urls: urls
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.before-after {
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.ba-title {
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.ba-title-text {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.ba-container {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.ba-item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
border-radius: 12rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ba-image {
|
||||
width: 100%;
|
||||
height: 280rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
|
||||
.ba-label {
|
||||
position: absolute;
|
||||
bottom: 16rpx;
|
||||
left: 16rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.before-label {
|
||||
background-color: rgba(144, 147, 153, 0.9);
|
||||
}
|
||||
|
||||
.after-label {
|
||||
background-color: rgba(212, 165, 116, 0.9);
|
||||
}
|
||||
|
||||
.ba-label-text {
|
||||
font-size: 22rpx;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.ba-arrow {
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
|
||||
.ba-arrow-text {
|
||||
font-size: 40rpx;
|
||||
color: #D4A574;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
154
前端/components/case-card/case-card.uvue
Normal file
154
前端/components/case-card/case-card.uvue
Normal file
@@ -0,0 +1,154 @@
|
||||
<template>
|
||||
<view class="case-card" @click="handleClick">
|
||||
<!-- 封面图 -->
|
||||
<view class="card-image-wrapper">
|
||||
<image
|
||||
class="card-image"
|
||||
:src="caseData.coverImage"
|
||||
mode="aspectFill"
|
||||
></image>
|
||||
<view class="card-category">{{ caseData.categoryName }}</view>
|
||||
</view>
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<view class="card-content">
|
||||
<text class="card-title">{{ caseData.title }}</text>
|
||||
<view class="card-info">
|
||||
<view class="info-item">
|
||||
<text class="info-label">材质：</text>
|
||||
<text class="info-value">{{ caseData.material }}</text>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="info-label">工期：</text>
|
||||
<text class="info-value">{{ caseData.duration }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-footer">
|
||||
<text class="card-price">{{ caseData.price }}</text>
|
||||
<view class="card-stats">
|
||||
<text class="stat-item">👁 {{ caseData.views }}</text>
|
||||
<text class="stat-item">❤ {{ caseData.likes }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
// 定义Props类型
|
||||
type CaseItem = {
|
||||
id : string
|
||||
title : string
|
||||
category : string
|
||||
categoryName : string
|
||||
coverImage : string
|
||||
material : string
|
||||
duration : string
|
||||
price : string
|
||||
views : number
|
||||
likes : number
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
caseData : CaseItem
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e : 'click', id : string) : void
|
||||
}>()
|
||||
|
||||
const handleClick = () => {
|
||||
emit('click', props.caseData.id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.case-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.card-image-wrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 360rpx;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card-category {
|
||||
position: absolute;
|
||||
top: 16rpx;
|
||||
left: 16rpx;
|
||||
background-color: rgba(212, 165, 116, 0.9);
|
||||
color: #ffffff;
|
||||
font-size: 22rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
margin-bottom: 16rpx;
|
||||
lines: 1;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
flex-direction: row;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 26rpx;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 26rpx;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 16rpx;
|
||||
padding-top: 16rpx;
|
||||
border-top-width: 1rpx;
|
||||
border-top-style: solid;
|
||||
border-top-color: #EBEEF5;
|
||||
}
|
||||
|
||||
.card-price {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #D4A574;
|
||||
}
|
||||
|
||||
.card-stats {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
font-size: 24rpx;
|
||||
color: #909399;
|
||||
margin-left: 24rpx;
|
||||
}
|
||||
</style>
|
||||
105
前端/components/nav-bar/nav-bar.uvue
Normal file
105
前端/components/nav-bar/nav-bar.uvue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<view class="nav-content" :style="{ height: navBarHeight + 'px' }">
|
||||
<!-- 左侧返回按钮 -->
|
||||
<view class="nav-left" v-if="showBack" @click="handleBack">
|
||||
<text class="nav-back-icon">←</text>
|
||||
</view>
|
||||
<view class="nav-left" v-else></view>
|
||||
|
||||
<!-- 标题 -->
|
||||
<view class="nav-center">
|
||||
<text class="nav-title" :style="{ color: titleColor }">{{ title }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 右侧插槽 -->
|
||||
<view class="nav-right">
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 占位高度 -->
|
||||
<view :style="{ height: (statusBarHeight + navBarHeight) + 'px' }"></view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
const props = defineProps<{
|
||||
title ?: string
|
||||
showBack ?: boolean
|
||||
titleColor ?: string
|
||||
bgColor ?: string
|
||||
}>()
|
||||
|
||||
// 状态栏高度
|
||||
const statusBarHeight = ref(20)
|
||||
// 导航栏高度
|
||||
const navBarHeight = ref(44)
|
||||
|
||||
onMounted(() => {
|
||||
const sysInfo = uni.getSystemInfoSync()
|
||||
statusBarHeight.value = sysInfo.statusBarHeight
|
||||
// #ifdef MP-WEIXIN
|
||||
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
|
||||
navBarHeight.value = (menuButtonInfo.top - sysInfo.statusBarHeight) * 2 + menuButtonInfo.height
|
||||
// #endif
|
||||
})
|
||||
|
||||
const handleBack = () => {
|
||||
uni.navigateBack({
|
||||
fail: () => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #ffffff;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 24rpx;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
width: 80rpx;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-back-icon {
|
||||
font-size: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.nav-center {
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
width: 80rpx;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
71
前端/components/section-header/section-header.uvue
Normal file
71
前端/components/section-header/section-header.uvue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view class="section-header">
|
||||
<view class="section-left">
|
||||
<view class="section-line"></view>
|
||||
<text class="section-title">{{ title }}</text>
|
||||
</view>
|
||||
<view class="section-right" v-if="showMore" @click="handleMore">
|
||||
<text class="section-more">查看更多</text>
|
||||
<text class="section-arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
const props = defineProps<{
|
||||
title : string
|
||||
showMore ?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e : 'more') : void
|
||||
}>()
|
||||
|
||||
const handleMore = () => {
|
||||
emit('more')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.section-header {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 32rpx 0 24rpx 0;
|
||||
}
|
||||
|
||||
.section-left {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-line {
|
||||
width: 8rpx;
|
||||
height: 36rpx;
|
||||
background-color: #D4A574;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.section-right {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-more {
|
||||
font-size: 26rpx;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.section-arrow {
|
||||
font-size: 32rpx;
|
||||
color: #909399;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
</style>
|
||||
56
前端/components/service-card/service-card.uvue
Normal file
56
前端/components/service-card/service-card.uvue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<view class="service-card" @click="handleClick">
|
||||
<view class="service-icon-wrapper">
|
||||
<image class="service-icon" :src="icon" mode="aspectFit"></image>
|
||||
</view>
|
||||
<text class="service-name">{{ name }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
const props = defineProps<{
|
||||
id : string
|
||||
name : string
|
||||
icon : string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e : 'click', id : string) : void
|
||||
}>()
|
||||
|
||||
const handleClick = () => {
|
||||
emit('click', props.id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.service-card {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24rpx 16rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 16rpx;
|
||||
width: 160rpx;
|
||||
}
|
||||
|
||||
.service-icon-wrapper {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background-color: #FDF6EE;
|
||||
border-radius: 50%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
}
|
||||
|
||||
.service-name {
|
||||
font-size: 26rpx;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user