jiazhipeng
/
EpicSoul
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

style样式优化

dev_des
1054425342@qq.com 3 months ago
parent
0098af14d3
commit
6d233d6a8d
8 changed files with 1613 additions and 1552 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      components/ProductSection.vue
  2. 4
      components/WaterfallLayout.vue
  3. 461
      pages/index/iSoul.vue
  4. 18
      pages/index/index.vue
  5. 2
      pages/login/login.vue
  6. 207
      subPackages/equityGoods/detail.vue
  7. 31
      subPackages/equityGoods/list.vue
  8. 43
      uni_modules/uni-transition/components/uni-transition/uni-transition.vue

7
components/ProductSection.vue
View File

@ -184,18 +184,18 @@ export default {
// 标题区域
.title-section {
padding: 18rpx 24rpx;
padding: 14rpx 24rpx 8rpx ;
margin: 40rpx 16rpx 0rpx;
display: inline-block;
border-radius: 14rpx 14rpx 0 0;
.title {
font-size: 36rpx;
font-weight: bold;
font-weight: 500;
color: #4d4d4d;
}
.more-btn {
font-size: 18rpx;
font-size: 20rpx;
color: #999999;
margin-left: 35rpx;
}
@ -295,6 +295,7 @@ export default {
// 卡片内容
.card-content {
padding: 24rpx 0;
padding-bottom: 0;
}
.title-price-heart {

4
components/WaterfallLayout.vue
View File

@ -27,7 +27,7 @@
<text class="username">{{ item.user.name }}</text>
</view>
<view class="like-info">
<text class="like-icon">♥</text>
<image :src="showImg('/uploads/20250731/0260884d7a44a483885a026da524e0b8.png')" style="height: 22rpx;width: 25rpx;"></image>
<text class="like-count">{{ item.likes }}</text>
</view>
</view>
@ -61,7 +61,7 @@
<text class="username">{{ item.user.name }}</text>
</view>
<view class="like-info">
<text class="like-icon">♥</text>
<image :src="showImg('/uploads/20250731/0260884d7a44a483885a026da524e0b8.png')" style="height: 22rpx;width: 25rpx;"></image>
<text class="like-count">{{ item.likes }}</text>
</view>
</view>

461
pages/index/iSoul.vue
View File

@ -1,8 +1,13 @@
<template>
<view class="profile-container">
<view class="user-top" :style="{
backgroundImage: `url(${showImg('/uploads/20250728/4ad18fba010760a527d0cf5e24bcf467.png')})`,
}">
<view
class="user-top"
:style="{
backgroundImage: `url(${showImg(
'/uploads/20250728/4ad18fba010760a527d0cf5e24bcf467.png'
)})`,
}"
>
<!-- 状态栏占位 -->
<view class="status-bar-placeholder"></view>
<!-- 顶部导航 -->
@ -17,8 +22,11 @@
<!-- 用户信息区域 -->
<view class="user-section" @click="gotoProfile">
<view class="user-avatar">
<image :src="userInfo.avatar ? showImg(userInfo.avatar) : defaultAvatar" mode="aspectFill"
class="avatar-img"></image>
<image
:src="userInfo.avatar ? showImg(userInfo.avatar) : defaultAvatar"
mode="aspectFill"
class="avatar-img"
></image>
</view>
<view class="user-info">
<view class="username">{{ userInfo.nickname || "用户" }}</view>
@ -63,10 +71,23 @@
<view class="agent-title">待激活的Agent</view>
</view>
<view class="agent-content">
<scroll-view class="agent-scroll" scroll-x="true" show-scrollbar="false">
<scroll-view
class="agent-scroll"
scroll-x="true"
:show-scrollbar="false"
:enhanced="true"
>
<view class="agent-avatars">
<view class="agent-avatar" v-for="(agent, index) in agentList" :key="index">
<image :src="agent.avatar" mode="aspectFill" class="agent-img"></image>
<view
class="agent-avatar"
v-for="(agent, index) in agentList"
:key="index"
>
<image
:src="agent.avatar"
mode="aspectFill"
class="agent-img"
></image>
</view>
</view>
</scroll-view>
@ -85,10 +106,18 @@
<!-- 数字资产权益 -->
<view class="digital-assets">
<view class="asset-card">
<image :src="showImg('/uploads/20250729/42598a2dcf4c9a6f8c6e122e54b65c4f.png')" mode="aspectFill"
class="digital-img"></image>
<image
:src="
showImg('/uploads/20250729/42598a2dcf4c9a6f8c6e122e54b65c4f.png')
"
mode="aspectFill"
class="digital-img"
></image>
<view class="asset-actions">
<view class="asset-action active" @click="handleAssetAction('待核销')">
<view
class="asset-action active"
@click="handleAssetAction('待核销')"
>
<view class="action-icon red"></view>
<text>待核销</text>
</view>
@ -111,10 +140,18 @@
<!-- 有感商品 -->
<view class="feeling-goods">
<view class="goods-card">
<image :src="showImg('/uploads/20250729/a010feb51e3f195563fb440f9235cc8b.png')" mode="aspectFill"
class="digital-img"></image>
<image
:src="
showImg('/uploads/20250729/a010feb51e3f195563fb440f9235cc8b.png')
"
mode="aspectFill"
class="digital-img"
></image>
<view class="goods-actions">
<view class="goods-action active" @click="handleGoodsAction('购物车')">
<view
class="goods-action active"
@click="handleGoodsAction('购物车')"
>
<view class="action-icon red"></view>
<text>购物车</text>
</view>
@ -143,16 +180,26 @@
</view>
<view class="memorial-cards">
<view class="memorial-card" @click="handleMemorialClick(0)">
<image :src="showImg('/uploads/20250729/105755e9b2e570e46b96d54ed61abe51.png')" mode="aspectFill"
class="memorial-img"></image>
<image
:src="
showImg('/uploads/20250729/105755e9b2e570e46b96d54ed61abe51.png')
"
mode="aspectFill"
class="memorial-img"
></image>
<view class="memorial-info">
<text class="memorial-title">世界花园｜凤景里的苏州</text>
<text class="memorial-more">MORE</text>
</view>
</view>
<view class="memorial-card" @click="handleMemorialClick(1)">
<image :src="showImg('/uploads/20250729/42fe2364167c2342076c4e094df3d288.png')" mode="aspectFill"
class="memorial-img"></image>
<image
:src="
showImg('/uploads/20250729/42fe2364167c2342076c4e094df3d288.png')
"
mode="aspectFill"
class="memorial-img"
></image>
<view class="memorial-info">
<text class="memorial-title">男神女神罗曼史</text>
<text class="memorial-more">MORE</text>
@ -163,7 +210,12 @@
<!-- 底部菜单 -->
<view class="bottom-menu">
<view class="menu-item" v-for="(item, index) in menuItems" :key="index" @click="handleMenuClick(item)">
<view
class="menu-item"
v-for="(item, index) in menuItems"
:key="index"
@click="handleMenuClick(item)"
>
<text>{{ item.title }}</text>
</view>
</view>
@ -174,55 +226,62 @@
</template>
<script>
import moment from "moment";
import CustomTabBar from "@/components/CustomTabBar.vue";
import MusicControl from "@/components/MusicControl.vue";
export default {
import moment from "moment";
import CustomTabBar from "@/components/CustomTabBar.vue";
import MusicControl from "@/components/MusicControl.vue";
export default {
components: {
CustomTabBar,
MusicControl
MusicControl,
},
data() {
return {
userInfo: {},
defaultAvatar: "https://changshu.js-dyyj.com/uploads/20250326/516242619f0772bee371a60684618c01.png",
defaultAvatar:
"https://changshu.js-dyyj.com/uploads/20250326/516242619f0772bee371a60684618c01.png",
userStats: {
following: "140",
followers: "2462",
likes: "5.4万",
},
agentList: [{
avatar: "https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png",
agentList: [
{
avatar:
"https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png",
},
{
avatar: "https://epic.js-dyyj.com/uploads/20250728/d7bf0dd2f3f272afba687b525a7c575c.png",
avatar:
"https://epic.js-dyyj.com/uploads/20250728/d7bf0dd2f3f272afba687b525a7c575c.png",
},
{
avatar: "https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png",
avatar:
"https://epic.js-dyyj.com/uploads/20250728/d27ef6e6c26877da7775664fed376c6f.png",
},
{
avatar: "https://epic.js-dyyj.com/uploads/20250728/d7bf0dd2f3f272afba687b525a7c575c.png",
avatar:
"https://epic.js-dyyj.com/uploads/20250728/d7bf0dd2f3f272afba687b525a7c575c.png",
},
],
menuItems: [{
menuItems: [
{
title: "账号与安全",
icon: "🔒"
icon: "🔒",
},
{
title: "购物车",
icon: "🛒"
icon: "🛒",
},
{
title: "地址管理",
icon: "📍"
icon: "📍",
},
{
title: "卡券中心",
icon: "🎫"
icon: "🎫",
},
{
title: "帮助与客服",
icon: "💬"
icon: "💬",
},
],
};
@ -235,7 +294,8 @@
this.userInfo =
(uni.getStorageSync("userInfo") &&
JSON.parse(uni.getStorageSync("userInfo"))) ||
this.$store.state.user.userInfo || {};
this.$store.state.user.userInfo ||
{};
console.log(this.userInfo);
},
methods: {
@ -282,7 +342,8 @@
case "帮助与客服":
uni.showModal({
title: "客服电话",
content: "0515-69186109\n服务时间：周一至周五\n9:00-12:00，13:00-18:00",
content:
"0515-69186109\n服务时间：周一至周五\n9:00-12:00，13:00-18:00",
confirmText: "拨打",
success: (res) => {
if (res.confirm) {
@ -377,37 +438,37 @@
}
},
},
};
};
</script>
<style scoped lang="scss">
view {
view {
box-sizing: border-box;
}
}
.profile-container {
.profile-container {
background: white;
min-height: 100vh;
padding-bottom: 200rpx;
color: white;
}
}
/* 状态栏占位 */
.status-bar-placeholder {
/* 状态栏占位 */
.status-bar-placeholder {
height: var(--status-bar-height);
width: 100%;
}
}
/* 顶部导航 */
.header {
/* 顶部导航 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
height: 40px;
}
height: 48px;
}
.back-btn,
.more-btn {
.back-btn,
.more-btn {
width: 60rpx;
height: 60rpx;
display: flex;
@ -415,88 +476,88 @@
justify-content: center;
font-size: 40rpx;
color: white;
}
}
.dots {
.dots {
font-size: 32rpx;
font-weight: bold;
}
}
/* 用户信息区域 */
.user-section {
/* 用户信息区域 */
.user-section {
display: flex;
align-items: center;
padding: 0 40rpx 30rpx;
}
}
.user-avatar {
.user-avatar {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
overflow: hidden;
margin-right: 30rpx;
}
}
.avatar-img {
.avatar-img {
width: 100%;
height: 100%;
}
}
.user-info {
.user-info {
flex: 1;
}
}
.username {
.username {
font-size: 36rpx;
font-weight: bold;
color: white;
margin-bottom: 10rpx;
}
}
.user-id {
.user-id {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 10rpx;
}
}
.location {
.location {
display: flex;
align-items: center;
font-size: 24rpx;
color: rgba(255, 255, 255, 0.8);
}
}
.location-icon,
.info-icon {
.location-icon,
.info-icon {
margin-right: 8rpx;
}
}
/* 城市艺术漫游 */
.city-art {
/* 城市艺术漫游 */
.city-art {
padding: 0 40rpx 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
}
}
.city-title {
.city-title {
display: flex;
align-items: center;
font-size: 28rpx;
color: rgba(255, 255, 255, 0.9);
}
}
.pin-icon {
.pin-icon {
margin-right: 8rpx;
}
}
.city-name {
.city-name {
font-size: 28rpx;
color: white;
font-weight: bold;
}
}
.gender-icon {
.gender-icon {
width: 40rpx;
height: 40rpx;
background: rgba(255, 255, 255, 0.2);
@ -505,40 +566,40 @@
align-items: center;
justify-content: center;
font-size: 24rpx;
}
}
/* 统计数据 */
.stats-section {
/* 统计数据 */
.stats-section {
display: flex;
justify-content: space-around;
margin-top: 80rpx;
padding-bottom: 50rpx;
}
}
.stat-item {
.stat-item {
text-align: center;
}
}
.stat-number {
.stat-number {
font-size: 32rpx;
font-weight: bold;
color: white;
margin-bottom: 8rpx;
}
}
.stat-label {
.stat-label {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.8);
}
}
/* 操作按钮 */
.action-buttons {
/* 操作按钮 */
.action-buttons {
display: flex;
padding: 0 40rpx 40rpx;
gap: 20rpx;
}
}
.follow-btn {
.follow-btn {
flex: 1;
background: #ff4757;
border-radius: 50rpx;
@ -547,9 +608,9 @@
color: white;
font-size: 28rpx;
font-weight: bold;
}
}
.message-btn {
.message-btn {
flex: 1;
background: rgba(255, 255, 255, 0.2);
border-radius: 50rpx;
@ -558,10 +619,10 @@
color: white;
font-size: 28rpx;
font-weight: bold;
}
}
/* 待激活的Agent */
.agent-section {
/* 待激活的Agent */
.agent-section {
margin: 0 47rpx;
border-radius: 20rpx;
margin-bottom: 30rpx;
@ -569,73 +630,76 @@
display: flex;
align-items: center;
padding: 30rpx 0;
}
}
.agent-header {
.agent-header {
margin-right: 30rpx;
flex-shrink: 0;
}
}
.agent-title {
.agent-title {
font-size: 28rpx;
color: #000000;
}
}
.agent-content {
.agent-content {
flex: 1;
}
}
.agent-scroll {
.agent-scroll {
width: 430rpx;
white-space: nowrap;
/* 微信小程序隐藏横向滚动条 */
overflow: hidden;
/* Webkit浏览器 */
&::-webkit-scrollbar {
display: none !important;
width: 0 !important;
height: 0 !important;
}
.agent-scroll::-webkit-scrollbar {
display: none;
}
.agent-scroll {
-ms-overflow-style: none;
/* Firefox */
scrollbar-width: none;
}
/* IE和Edge */
-ms-overflow-style: none;
}
.agent-avatars {
.agent-avatars {
display: inline-flex;
gap: 20rpx;
}
}
.agent-avatar {
.agent-avatar {
width: 104rpx;
height: 104rpx;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
}
.agent-img {
.agent-img {
width: 100%;
height: 100%;
}
}
/* 数字资产权益 */
.digital-assets {
/* 数字资产权益 */
.digital-assets {
margin: 0 30rpx 0rpx;
}
}
.asset-card {
.asset-card {
border-radius: 20rpx;
overflow: hidden;
}
}
.asset-bg {
.asset-bg {
padding: 40rpx 30rpx 30rpx;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
position: relative;
overflow: hidden;
}
}
.asset-bg::before {
content: '';
.asset-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
@ -643,25 +707,25 @@
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="85" cy="15" r="8" fill="rgba(255,255,255,0.1)"/><circle cx="15" cy="85" r="6" fill="rgba(255,255,255,0.08)"/><circle cx="70" cy="70" r="4" fill="rgba(255,255,255,0.06)"/></svg>');
pointer-events: none;
}
}
.asset-title {
.asset-title {
font-size: 32rpx;
color: white;
font-weight: 600;
position: relative;
z-index: 1;
}
}
.asset-actions {
.asset-actions {
display: flex;
padding: 20rpx 0;
background: white;
font-size: 25rpx;
}
}
.asset-action {
.asset-action {
flex: 1;
display: flex;
flex-direction: column;
@ -670,67 +734,67 @@
font-size: 24rpx;
color: #666;
position: relative;
}
}
.asset-action.active {
.asset-action.active {
color: #ff4757;
}
}
.action-icon {
.action-icon {
width: 36rpx;
height: 36rpx;
border-radius: 50%;
margin-bottom: 12rpx;
}
}
.action-icon.red {
.action-icon.red {
background: #ff4757;
}
}
.action-icon.gray {
.action-icon.gray {
background: #ccc;
}
}
/* 有感商品 */
.feeling-goods {
/* 有感商品 */
.feeling-goods {
margin: 20rpx 30rpx 30rpx;
}
}
.goods-card {
.goods-card {
border-radius: 20rpx;
overflow: hidden;
}
}
.goods-bg {
.goods-bg {
padding: 40rpx 30rpx 20rpx;
position: relative;
}
}
.goods-title {
.goods-title {
font-size: 32rpx;
color: white;
font-weight: bold;
margin-bottom: 10rpx;
}
}
.goods-brand {
.goods-brand {
font-size: 36rpx;
color: white;
font-weight: bold;
margin-bottom: 5rpx;
}
}
.goods-subtitle {
.goods-subtitle {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.8);
}
}
.goods-actions {
.goods-actions {
display: flex;
background: white;
}
}
.goods-action {
.goods-action {
flex: 1;
display: flex;
flex-direction: column;
@ -738,102 +802,103 @@
padding: 20rpx 10rpx;
font-size: 24rpx;
color: #666;
}
}
.goods-action.active {
.goods-action.active {
color: #ff4757;
}
}
/* 数字资产纪念册 */
.memorial-section {
/* 数字资产纪念册 */
.memorial-section {
margin: 0 47rpx;
margin-bottom: 30rpx;
}
}
.memorial-divider {
.memorial-divider {
display: flex;
align-items: center;
padding: 30rpx 0;
margin-bottom: 30rpx;
}
}
.divider-line {
.divider-line {
flex: 1;
height: 2rpx;
background: #e0e0e0;
}
}
.divider-text {
.divider-text {
padding: 0 30rpx;
font-size: 28rpx;
color: #000000;
font-weight: 500;
white-space: nowrap;
}
}
.memorial-cards {
.memorial-cards {
display: flex;
gap: 20rpx;
}
}
.memorial-card {
.memorial-card {
flex: 1;
border-radius: 10rpx;
overflow: hidden;
background: white;
}
}
.memorial-img {
.memorial-img {
width: 100%;
height: 425rpx;
}
}
.memorial-info {
.memorial-info {
padding: 20rpx 10rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.memorial-title {
.memorial-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 22rpx;
color: #000000;
flex: 1;
}
}
.memorial-more {
.memorial-more {
font-size: 14rpx;
color: #999;
}
}
/* 底部菜单 */
.bottom-menu {
/* 底部菜单 */
.bottom-menu {
padding: 40rpx 30rpx;
background: white;
margin: 0 30rpx;
border-radius: 20rpx;
margin-bottom: 30rpx;
}
}
.menu-item {
.menu-item {
padding: 30rpx 0;
border-bottom: 1rpx solid #f5f5f5;
font-size: 28rpx;
color: #333;
}
}
.menu-item:last-child {
.menu-item:last-child {
border-bottom: none;
}
}
.user-top {}
.user-top {
}
.digital-img {
.digital-img {
height: 265rpx;
width: 100%;
border-radius: 20rpx;
}
}
</style>

18
pages/index/index.vue
View File

@ -18,8 +18,6 @@
:productList="productList"
moreUrl="/subPackages/equityGoods/index"
detailUrlPrefix="/subPackages/equityGoods/detail"
@more-click="goToMore"
@product-click="goToDetail"
@like-toggle="handleLikeToggle"
/>
<ProductSection
@ -31,8 +29,6 @@
:productList="productListFeeling"
moreUrl="/pages/index/sensoryStore"
detailUrlPrefix="/subPackages/techan/detail"
@more-click="goToMore"
@product-click="goToDetail"
@like-toggle="handleLikeToggle"
isFeel
/>
@ -115,6 +111,9 @@ export default {
},
onShow() {
this.browse_record({ type: "page", title: "首页" });
this.$nextTick(() =>{
this.$refs.dynamicIsland.getUserInfo();
})
},
onPageScroll(e) {
// 只触发带页面ID的事件，避免不同页面间的状态冲突
@ -166,12 +165,7 @@ export default {
encodeURIComponent(JSON.stringify(item)),
});
},
// 跳转到商品详情
goToDetail(item) {
uni.navigateTo({
url: "/subPackages/techan/detail?id=" + item.id,
});
},
// 处理收藏状态切换
handleLikeToggle({ item, index }) {
this.productList[index] = item;
@ -201,7 +195,11 @@ export default {
},
};
</script>
<style>
page{
}
</style>
<style lang="scss" scoped>
.bg {
min-height: 100vh;

2
pages/login/login.vue
View File

@ -331,7 +331,7 @@ export default {
// 按钮容器
.btn-container {
margin-top: auto;
// margin-top: auto;
}
// 按钮组

207
subPackages/equityGoods/detail.vue
View File

@ -2,37 +2,21 @@
<view class="detail-container">
<!-- 轮播图区域 -->
<view class="banner-content">
<swiper
class="top-banner"
:circular="true"
:interval="6000"
:duration="800"
:indicator-dots="false"
:autoplay="true"
@change="swiperChange"
>
<swiper class="top-banner" :circular="true" :interval="6000" :duration="800" :indicator-dots="false"
:autoplay="true" @change="swiperChange">
<swiper-item v-for="(item, index) in topBanner" :key="index">
<image
class="top-banner"
:src="showImg(item)"
mode="aspectFill"
></image>
<image class="top-banner" :src="showImg(item)" mode="aspectFill"></image>
</swiper-item>
</swiper>
<view class="dot-container">
<view
:class="['dot-line', index == swiperIndex ? 'active' : '']"
v-for="(item, index) in topBanner"
:key="index"
></view>
<view :class="['dot-line', index == swiperIndex ? 'active' : '']" v-for="(item, index) in topBanner"
:key="index"></view>
</view>
<!-- 页码指示器 -->
<view class="page-indicator">
<text class="page-text"
>{{ swiperIndex + 1 }}/{{ topBanner.length }}</text
>
<text class="page-text">{{ swiperIndex + 1 }}/{{ topBanner.length }}</text>
</view>
</view>
@ -55,11 +39,9 @@
<text class="price">699.00</text>
</view>
<view class="collect-container">
<image
class="heart-icon"
<image class="heart-icon"
src="https://epic.js-dyyj.com/uploads/20250728/2f3ae212c01fa3b67be81abc5723cf5c.png"
@click.stop="handleLikeClick(item, index)"
></image>
@click.stop="handleLikeClick(item, index)"></image>
<text class="collect-count">1700收藏</text>
</view>
</view>
@ -92,27 +74,17 @@
<!-- 权益详情 -->
<view class="equity-details">
<!-- 显示前两个权益项 -->
<view
class="equity-detail-item"
v-for="(item, index) in displayEquityList"
:key="index"
>
<view class="equity-detail-item" v-for="(item, index) in displayEquityList" :key="index">
<view class="detail-content-wrapper">
<text class="detail-label">{{ item.label }}</text>
<text class="detail-content">{{ item.content }}</text>
</view>
<!-- 在最后一个显示项的右侧添加展开收起图标 -->
<view
v-if="index === displayEquityList.length - 1"
class="toggle-icon"
@click="toggleEquityExpand"
>
<view v-if="index === displayEquityList.length - 1" class="toggle-icon" @click="toggleEquityExpand">
<text class="icon-text">{{
isEquityExpanded ? "收起" : "展开"
}}</text>
<text class="icon-arrow" :class="{ expanded: isEquityExpanded }"
>▼</text
>
<text class="icon-arrow" :class="{ expanded: isEquityExpanded }">▼</text>
</view>
</view>
</view>
@ -120,12 +92,8 @@
<!-- Tab切换区域 -->
<view class="tab-nav">
<view
v-for="(tab, index) in tabList"
:key="index"
:class="['tab-item', { active: currentTab === index }]"
@click="switchTab(index)"
>
<view v-for="(tab, index) in tabList" :key="index" :class="['tab-item', { active: currentTab === index }]"
@click="switchTab(index)">
<text class="tab-text">{{ tab.name }}</text>
</view>
</view>
@ -137,75 +105,30 @@
<!-- 登记证书 -->
<view v-if="currentTab === 0" class="tab-panel">
<view class="certificate-container">
<image
class="certificate-image"
<image class="certificate-image"
src="https://epic.js-dyyj.com/uploads/20250731/d7d5be03617e3cce94dc34e8de426395.png"
mode="widthFix"
></image>
mode="widthFix"></image>
</view>
</view>
<!-- IP资产详情 -->
<view v-if="currentTab === 1" class="tab-panel">
<view class="info-content">
<view class="info-item">
<text class="info-label">IP资产名称：</text>
<text class="info-value">食在苏州｜世界美食之都巡礼</text>
</view>
<view class="info-item">
<text class="info-label">创作者：</text>
<text class="info-value">苏州xxx博物馆</text>
</view>
<view class="info-item">
<text class="info-label">发行数量：</text>
<text class="info-value">1000份</text>
</view>
<view class="info-item">
<text class="info-label">发行时间：</text>
<text class="info-value">2024年6月16日</text>
</view>
</view>
<image :src="
showImg('/uploads/20250731/0d8cb190c358c0cf52fab89bb98a0373.jpg')
" style="width: 100%" mode="widthFix"></image>
</view>
<!-- 数据商品详情 -->
<view v-if="currentTab === 2" class="tab-panel">
<image
:src="
<image :src="
showImg('/uploads/20250731/ecf91ddfb9f89658a7d82e3ff846f71c.png')
"
style="width: 100%"
mode="widthFix"
></image>
" style="width: 100%" mode="widthFix"></image>
</view>
<!-- 权益信息 -->
<view v-if="currentTab === 3" class="tab-panel">
<view class="equity-info-content">
<view
class="equity-info-item"
v-for="(item, index) in equityList"
:key="index"
>
<text class="equity-info-label">{{ item.label }}</text>
<text class="equity-info-value">{{ item.content }}</text>
</view>
<view class="equity-description">
<text class="description-text">
本数字文创作品基于区块链技术发行，具有唯一性和不可篡改性。持有者享有以下权益：
1.
数字资产所有权：获得该数字文创作品的完整所有权，包括展示、收藏等权利；
2.
实物权益兑换：可凭此数字资产兑换相应的实物文创产品，包括限量版公仔、纪念品等；
3.
文化体验权益：享受苏州相关文化场所的优惠门票、专属活动参与资格等特殊权益；
4.
增值收益权：作为限量发行的数字资产，具有一定的收藏价值和增值潜力；
5.
社区会员权益：加入专属收藏者社区，享受优先购买新品、参与线下活动等会员特权。
注：以上权益的具体实施细则以官方最终解释为准，部分权益可能存在时效性限制。
</text>
</view>
</view>
<image :src="
showImg('/uploads/20250731/83af15ea93f0cd91eb780a7bb240257a.jpg')
" style="width: 100%" mode="widthFix"></image>
</view>
</view>
</view>
@ -220,7 +143,7 @@
</template>
<script>
export default {
export default {
data() {
return {
topBanner: [
@ -231,26 +154,42 @@ export default {
swiperIndex: 0,
isEquityExpanded: false, // 权益详情展开状态
currentTab: 0, // 当前选中的tab索引
tabList: [
{ name: "登记证书" },
{ name: "IP资产详情" },
{ name: "资源商品详情" },
{ name: "权益信息详情" },
tabList: [{
name: "登记证书"
},
{
name: "IP资产详情"
},
{
name: "资源商品详情"
},
{
name: "资源商品详情"
},
],
equityList: [
// 权益列表数据
{ label: "权益1：", content: "数字资产*1、数字资产*1" },
{ label: "权益2：", content: "IP文创公仔*1、IP文创公仔*1" },
{ label: "权益3：", content: "XX园林门票*1、XX园林门票*1" },
{
label: "权益1：",
content: "数字资产*1、数字资产*1"
},
{
label: "权益2：",
content: "IP文创公仔*1、IP文创公仔*1"
},
{
label: "权益3：",
content: "XX园林门票*1、XX园林门票*1"
},
],
};
},
computed: {
// 根据展开状态显示不同数量的权益项
displayEquityList() {
return this.isEquityExpanded
? this.equityList
: this.equityList.slice(0, 2);
return this.isEquityExpanded ?
this.equityList :
this.equityList.slice(0, 2);
},
},
methods: {
@ -277,16 +216,16 @@ export default {
this.currentTab = index;
},
},
};
};
</script>
<style lang="scss" scoped>
.detail-container {
.detail-container {
background: #f5f5f5;
min-height: 100vh;
}
}
.banner-content {
.banner-content {
width: 100%;
height: 700rpx;
position: relative;
@ -331,9 +270,9 @@ export default {
font-weight: 500;
}
}
}
}
.product-info {
.product-info {
background: white;
padding: 40rpx 30rpx;
margin: 20rpx;
@ -374,7 +313,7 @@ export default {
.remaining {
color: #808080;
font-size: 17rpx;
font-size: 22rpx;
margin-left: auto;
}
}
@ -541,13 +480,15 @@ export default {
}
}
}
}
// Tab导航
.tab-nav {
}
// Tab导航
.tab-nav {
margin: 0 40rpx;
margin-top: 40rpx;
display: flex;
justify-content: space-between;
.tab-item {
padding: 10rpx 20rpx;
text-align: center;
@ -566,9 +507,10 @@ export default {
font-weight: bold;
}
}
}
// Tab切换区域
.tab-section {
}
// Tab切换区域
.tab-section {
margin: 0 20rpx;
background-color: #fff;
border-radius: 20rpx;
@ -661,10 +603,10 @@ export default {
}
}
}
}
}
// 立即购买按钮
.purchase-section {
// 立即购买按钮
.purchase-section {
position: fixed;
bottom: 0;
left: 0;
@ -675,6 +617,7 @@ export default {
z-index: 100;
padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
.purchase-button {
width: 100%;
height: 88rpx;
@ -697,10 +640,10 @@ export default {
color: white;
}
}
}
}
// 为底部按钮预留空间
.detail-container {
// 为底部按钮预留空间
.detail-container {
padding-bottom: 140rpx;
}
}
</style>

31
subPackages/equityGoods/list.vue
View File

@ -2,6 +2,14 @@
<view class="equity-goods-page">
<image style="width: 100%;" mode="widthFix"
:src="showImg('/uploads/20250728/748adc244fc7db313f569a6005344950.png')"></image>
<view class="location-selector" >
<text class="location-text">扬州</text>
<image
class="dropdown-icon"
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xIDFMNiA2TDExIDEiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+"
mode="heightFix"
></image>
</view>
<!-- 顶部标题区域 -->
<view class="header-section">
<view class="title">扬州数字资产权益产品</view>
@ -338,4 +346,27 @@
justify-content: space-between;
margin-bottom: 10rpx;
}
.location-selector {
position: absolute;
top: 20rpx;
left: 20rpx;
display: flex;
align-items: center;
padding: 8rpx 16rpx;
// border: 2rpx solid #e0e0e0;
border-radius: 20rpx;
min-width: 100rpx;
margin-right: 20rpx;
.location-text {
font-size: 30rpx;
color: white;
margin-right: 8rpx;
}
.dropdown-icon {
width: 24rpx;
height: 16rpx;
}
}
</style>

43
uni_modules/uni-transition/components/uni-transition/uni-transition.vue
View File

@ -132,10 +132,10 @@ export default {
* @param {Object} obj
*/
step(obj, config = {}) {
if (!this.animation) return
if (!this.animation) return this
for (let i in obj) {
try {
if (typeof this.animation[i] === 'function') {
if (this.animation && typeof this.animation[i] === 'function') {
if(typeof obj[i] === 'object'){
this.animation[i](...obj[i])
}else{
@ -143,12 +143,16 @@ export default {
}
}
} catch (e) {
console.error(`方法 ${i} 不存在`)
console.error(`方法 ${i} 不存在:`, e)
}
}
try {
if (this.animation && typeof this.animation.step === 'function') {
this.animation.step(config)
}
} catch (e) {
console.error('动画step执行错误:', e)
}
return this
},
/**
@ -156,9 +160,13 @@ export default {
*/
run(fn) {
if (!this.animation) return
if (typeof this.animation.run === 'function') {
try {
if (this.animation && typeof this.animation.run === 'function') {
this.animation.run(fn)
}
} catch (e) {
console.error('动画执行错误:', e)
}
},
// 开始过度动画
open() {
@ -174,13 +182,20 @@ export default {
this.$nextTick(() => {
// TODO 定时器保证动画完全执行，目前有些问题，后面会取消定时器
this.timer = setTimeout(() => {
try {
this.animation = createAnimation(this.config, this)
if (this.animation) {
this.tranfromInit(false).step()
if (typeof this.animation.run === 'function') {
this.animation.run()
let result = this.tranfromInit(false)
if (result && typeof result.step === 'function') {
result.step()
if (typeof result.run === 'function') {
result.run()
}
}
}
} catch (e) {
console.error('动画初始化错误:', e)
}
this.$emit('change', {
detail: this.isShow
})
@ -190,9 +205,12 @@ export default {
// 关闭过度动画
close(type) {
if (!this.animation) return
this.tranfromInit(true)
.step()
.run(() => {
try {
let result = this.tranfromInit(true)
if (result && typeof result.step === 'function') {
result.step()
if (typeof result.run === 'function') {
result.run(() => {
this.isShow = false
this.animationData = null
this.animation = null
@ -203,6 +221,11 @@ export default {
detail: this.isShow
})
})
}
}
} catch (e) {
console.error('动画关闭错误:', e)
}
},
// 处理动画开始前的默认样式
styleInit(type) {

Write Preview
Loading…
Cancel
Save