Browse Source

布局优化

Zhangbw 3 tháng trước cách đây
mục cha
commit
8d23deba3f

+ 7 - 3
dist/dev/mp-weixin/pages/pool/pool.wxss

@@ -116,7 +116,6 @@
   padding: 28rpx 24rpx;
   background: #fafbfc;
   border-radius: 20rpx;
-  transition: all 0.2s ease;
 }
 .stock-main {
   display: flex;
@@ -126,7 +125,7 @@
 .stock-info {
   display: flex;
   flex-direction: column;
-  min-width: 160rpx;
+  width: 140rpx;
 }
 .stock-name {
   font-size: 30rpx;
@@ -143,13 +142,16 @@
 .stock-quote {
   display: flex;
   align-items: center;
-  margin-left: 32rpx;
+  flex: 1;
+  justify-content: flex-end;
 }
 .stock-price {
   font-size: 32rpx;
   font-weight: 800;
   color: #1a1a2e;
   margin-right: 16rpx;
+  min-width: 120rpx;
+  text-align: right;
   font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
 }
 .stock-change {
@@ -157,6 +159,8 @@
   font-weight: 600;
   padding: 6rpx 12rpx;
   border-radius: 8rpx;
+  min-width: 100rpx;
+  text-align: center;
 }
 .text-red {
   color: #ef4444;

+ 3 - 3
dist/dev/mp-weixin/pages/rank/rank.js

@@ -140,9 +140,9 @@ const _sfc_main = {
         trendData = generateMockTrendData(stock.changePercent);
       }
       const ctx = common_vendor.index.createCanvasContext(canvasId, componentInstance);
-      const width = 100;
-      const height = 30;
-      const padding = 2;
+      const width = 120;
+      const height = 28;
+      const padding = 1;
       const maxValue = Math.max(...trendData);
       const minValue = Math.min(...trendData);
       const dataRange = maxValue - minValue;

+ 33 - 22
dist/dev/mp-weixin/pages/rank/rank.wxss

@@ -160,13 +160,13 @@
 .stock-list {
   display: flex;
   flex-direction: column;
-  gap: 20rpx;
+  gap: 16rpx;
 }
 
 /* 滑动删除容器 */
 .stock-item-wrapper {
   position: relative;
-  height: 140rpx;
+  height: 160rpx;
   overflow: hidden;
   border-radius: 20rpx;
   background: #fafbfc;
@@ -176,13 +176,13 @@
   height: 100%;
 }
 .movable-view {
-  width: calc(100% + 200rpx);
+  width: calc(100% + 160rpx);
   height: 100%;
 }
 .stock-item {
   display: flex;
   align-items: center;
-  padding: 28rpx 24rpx;
+  padding: 20rpx 16rpx;
   background: #fafbfc;
   border-radius: 20rpx;
   height: 100%;
@@ -192,7 +192,7 @@
 /* 滑动删除按钮 */
 .slide-delete-btn {
   flex-shrink: 0;
-  width: 200rpx;
+  width: 160rpx;
   height: 100%;
   display: flex;
   align-items: center;
@@ -219,18 +219,22 @@
   display: flex;
   align-items: center;
   flex: 1;
+  width: 100%;
 }
 .stock-info {
   display: flex;
   flex-direction: column;
-  min-width: 140rpx;
+  min-width: 130rpx;
+  flex-shrink: 0;
 }
 .stock-name {
   font-size: 30rpx;
   font-weight: 700;
   color: #1a1a2e;
-  margin-bottom: 6rpx;
-  letter-spacing: 1rpx;
+  margin-bottom: 8rpx;
+  letter-spacing: 0.5rpx;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
 }
 .stock-code-row {
   display: flex;
@@ -238,11 +242,12 @@
 }
 .stock-tag {
   font-size: 18rpx;
-  padding: 2rpx 8rpx;
+  padding: 3rpx 8rpx;
   border-radius: 6rpx;
   color: #ffffff;
   font-weight: 600;
-  margin-right: 8rpx;
+  margin-right: 6rpx;
+  flex-shrink: 0;
 }
 .market-sh {
   background: #ef4444;
@@ -255,40 +260,46 @@
 }
 .stock-code {
   font-size: 22rpx;
-  color: #9ca3af;
-  font-weight: 400;
+  color: #6b7280;
+  font-weight: 500;
+  text-rendering: optimizeLegibility;
 }
 .stock-quote {
   display: flex;
-  align-items: center;
-  margin-left: 16rpx;
+  flex-direction: column;
+  align-items: flex-end;
+  flex-shrink: 0;
+  min-width: 140rpx;
 }
 
 /* 趋势图 */
 .stock-chart {
   flex: 1;
-  height: 60rpx;
+  height: 56rpx;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 16rpx;
 }
 .trend-canvas {
-  width: 200rpx;
-  height: 60rpx;
+  width: 100%;
+  height: 56rpx;
 }
 .stock-price {
   font-size: 32rpx;
-  font-weight: 800;
+  font-weight: 700;
   color: #1a1a2e;
-  margin-right: 16rpx;
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
+  margin-bottom: 6rpx;
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
 }
 .stock-change {
-  font-size: 24rpx;
+  font-size: 22rpx;
   font-weight: 600;
-  padding: 6rpx 12rpx;
+  padding: 4rpx 10rpx;
   border-radius: 8rpx;
+  text-rendering: optimizeLegibility;
 }
 
 /* 表格视图 */

+ 7 - 3
dist/dev/mp-weixin/pages/strong/strong.wxss

@@ -116,7 +116,6 @@
   padding: 28rpx 24rpx;
   background: #fafbfc;
   border-radius: 20rpx;
-  transition: all 0.2s ease;
 }
 .stock-main {
   display: flex;
@@ -126,7 +125,7 @@
 .stock-info {
   display: flex;
   flex-direction: column;
-  min-width: 160rpx;
+  width: 140rpx;
 }
 .stock-name {
   font-size: 30rpx;
@@ -143,13 +142,16 @@
 .stock-quote {
   display: flex;
   align-items: center;
-  margin-left: 32rpx;
+  flex: 1;
+  justify-content: flex-end;
 }
 .stock-price {
   font-size: 32rpx;
   font-weight: 800;
   color: #1a1a2e;
   margin-right: 16rpx;
+  min-width: 120rpx;
+  text-align: right;
   font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
 }
 .stock-change {
@@ -157,6 +159,8 @@
   font-weight: 600;
   padding: 6rpx 12rpx;
   border-radius: 8rpx;
+  min-width: 100rpx;
+  text-align: center;
 }
 .text-red {
   color: #ef4444;

+ 7 - 3
src/pages/pool/pool.vue

@@ -469,7 +469,6 @@ onUnmounted(() => {
   padding: 28rpx 24rpx;
   background: #fafbfc;
   border-radius: 20rpx;
-  transition: all 0.2s ease;
 }
 
 .stock-main {
@@ -481,7 +480,7 @@ onUnmounted(() => {
 .stock-info {
   display: flex;
   flex-direction: column;
-  min-width: 160rpx;
+  width: 140rpx;
 }
 
 .stock-name {
@@ -501,7 +500,8 @@ onUnmounted(() => {
 .stock-quote {
   display: flex;
   align-items: center;
-  margin-left: 32rpx;
+  flex: 1;
+  justify-content: flex-end;
 }
 
 .stock-price {
@@ -509,6 +509,8 @@ onUnmounted(() => {
   font-weight: 800;
   color: #1a1a2e;
   margin-right: 16rpx;
+  min-width: 120rpx;
+  text-align: right;
   font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
 }
 
@@ -517,6 +519,8 @@ onUnmounted(() => {
   font-weight: 600;
   padding: 6rpx 12rpx;
   border-radius: 8rpx;
+  min-width: 100rpx;
+  text-align: center;
 }
 
 .text-red {

+ 37 - 25
src/pages/rank/rank.vue

@@ -331,9 +331,10 @@ const drawTrendChart = (stock) => {
   
   const ctx = uni.createCanvasContext(canvasId, componentInstance)
   
-  const width = 100
-  const height = 30
-  const padding = 2
+  // 趋势图尺寸(与 CSS 中 trend-canvas 对应)
+  const width = 120
+  const height = 28
+  const padding = 1
   
   const maxValue = Math.max(...trendData)
   const minValue = Math.min(...trendData)
@@ -855,13 +856,13 @@ onUnload(() => {
 .stock-list {
   display: flex;
   flex-direction: column;
-  gap: 20rpx;
+  gap: 16rpx;
 }
 
 /* 滑动删除容器 */
 .stock-item-wrapper {
   position: relative;
-  height: 140rpx;
+  height: 160rpx;
   overflow: hidden;
   border-radius: 20rpx;
   background: #fafbfc;
@@ -873,14 +874,14 @@ onUnload(() => {
 }
 
 .movable-view {
-  width: calc(100% + 200rpx);
+  width: calc(100% + 160rpx);
   height: 100%;
 }
 
 .stock-item {
   display: flex;
   align-items: center;
-  padding: 28rpx 24rpx;
+  padding: 20rpx 16rpx;
   background: #fafbfc;
   border-radius: 20rpx;
   height: 100%;
@@ -890,7 +891,7 @@ onUnload(() => {
 /* 滑动删除按钮 */
 .slide-delete-btn {
   flex-shrink: 0;
-  width: 200rpx;
+  width: 160rpx;
   height: 100%;
   display: flex;
   align-items: center;
@@ -920,20 +921,24 @@ onUnload(() => {
   display: flex;
   align-items: center;
   flex: 1;
+  width: 100%;
 }
 
 .stock-info {
   display: flex;
   flex-direction: column;
-  min-width: 140rpx;
+  min-width: 130rpx;
+  flex-shrink: 0;
 }
 
 .stock-name {
   font-size: 30rpx;
   font-weight: 700;
   color: #1a1a2e;
-  margin-bottom: 6rpx;
-  letter-spacing: 1rpx;
+  margin-bottom: 8rpx;
+  letter-spacing: 0.5rpx;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
 }
 
 .stock-code-row {
@@ -943,11 +948,12 @@ onUnload(() => {
 
 .stock-tag {
   font-size: 18rpx;
-  padding: 2rpx 8rpx;
+  padding: 3rpx 8rpx;
   border-radius: 6rpx;
   color: #ffffff;
   font-weight: 600;
-  margin-right: 8rpx;
+  margin-right: 6rpx;
+  flex-shrink: 0;
 }
 
 .market-sh {
@@ -964,20 +970,23 @@ onUnload(() => {
 
 .stock-code {
   font-size: 22rpx;
-  color: #9ca3af;
-  font-weight: 400;
+  color: #6b7280;
+  font-weight: 500;
+  text-rendering: optimizeLegibility;
 }
 
 .stock-quote {
   display: flex;
-  align-items: center;
-  margin-left: 16rpx;
+  flex-direction: column;
+  align-items: flex-end;
+  flex-shrink: 0;
+  min-width: 140rpx;
 }
 
 /* 趋势图 */
 .stock-chart {
   flex: 1;
-  height: 60rpx;
+  height: 56rpx;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -985,23 +994,26 @@ onUnload(() => {
 }
 
 .trend-canvas {
-  width: 200rpx;
-  height: 60rpx;
+  width: 100%;
+  height: 56rpx;
 }
 
 .stock-price {
   font-size: 32rpx;
-  font-weight: 800;
+  font-weight: 700;
   color: #1a1a2e;
-  margin-right: 16rpx;
-  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
+  margin-bottom: 6rpx;
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', sans-serif;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
 }
 
 .stock-change {
-  font-size: 24rpx;
+  font-size: 22rpx;
   font-weight: 600;
-  padding: 6rpx 12rpx;
+  padding: 4rpx 10rpx;
   border-radius: 8rpx;
+  text-rendering: optimizeLegibility;
 }
 
 /* 表格视图 */

+ 7 - 3
src/pages/strong/strong.vue

@@ -461,7 +461,6 @@ onUnmounted(() => {
   padding: 28rpx 24rpx;
   background: #fafbfc;
   border-radius: 20rpx;
-  transition: all 0.2s ease;
 }
 
 .stock-main {
@@ -473,7 +472,7 @@ onUnmounted(() => {
 .stock-info {
   display: flex;
   flex-direction: column;
-  min-width: 160rpx;
+  width: 140rpx;
 }
 
 .stock-name {
@@ -493,7 +492,8 @@ onUnmounted(() => {
 .stock-quote {
   display: flex;
   align-items: center;
-  margin-left: 32rpx;
+  flex: 1;
+  justify-content: flex-end;
 }
 
 .stock-price {
@@ -501,6 +501,8 @@ onUnmounted(() => {
   font-weight: 800;
   color: #1a1a2e;
   margin-right: 16rpx;
+  min-width: 120rpx;
+  text-align: right;
   font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
 }
 
@@ -509,6 +511,8 @@ onUnmounted(() => {
   font-weight: 600;
   padding: 6rpx 12rpx;
   border-radius: 8rpx;
+  min-width: 100rpx;
+  text-align: center;
 }
 
 .text-red {