Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

style(merch/detail): extract inline styles to class selectors

Browse Source 
extract inline css styles from template and style block into reusable scoped class selectors, improve code readability and maintainability
This commit is contained in:
ZF Sun
2026-05-29 14:28:47 +08:00
parent 58883b02f3
commit 2bd94a1e5a
1 changed files with 34 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
pages_promotion/merch/detail.vue
View File

@@ -11,19 +11,19 @@
</view>
<view class="iconfont" :class="{ 'icon-apps': isList, 'icon-list': !isList }" @click="changeListStyle()"></view> -->
<view style="width: 100rpx;height: 100rpx;">
<image :src="$util.img(merch.merch_image)" mode="widthFix" style="width: 100rpx;height: 100rpx;" show-menu-by-longpress/>
<view class="merch-image-wrap">
<image :src="$util.img(merch.merch_image)" mode="widthFix" class="merch-image-wrap" show-menu-by-longpress/>
</view>
<view style="margin-left: 20rpx;padding-top: 22rpx;">
<view style="line-height: 1;font-size: 32rpx;font-weight: 600;">{{ merch.merch_name }}</view>
<view style="color:rgb(255 202 40)">
<view class="merch-info">
<view class="merch-name">{{ merch.merch_name }}</view>
<view class="merch-star">
<text class="icox icox-xing"></text>
<text class="icox icox-xing"></text>
<text class="icox icox-xing"></text>
<text class="icox icox-xing"></text>
<text class="icox icox-xing"></text>
</view>
<view style="overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;" @longpress="showFullDesc">{{ merch.desc }}</view>
<view class="desc-text" @longpress="showFullDesc">{{ merch.desc }}</view>
</view>
</view>
@@ -367,6 +367,34 @@ export default {
@import './public/css/list.scss';
</style>
<style scoped>
.merch-image-wrap {
width: 100rpx;
height: 100rpx;
}
.merch-info {
margin-left: 20rpx;
padding-top: 22rpx;
}
.merch-name {
line-height: 1;
font-size: 32rpx;
font-weight: 600;
}
.merch-star {
color: rgb(255 202 40);
}
.desc-text {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
::v-deep .uni-tag--primary.uni-tag--inverted {
background-color: #f5f5f5 !important;
}