优化样式

hdApp/src/admin/goods/list.vue

@@ -193,14 +193,18 @@
       </view>
     </uni-popup>
 
-    <uni-popup ref="posterShow" background-color="#fff" type="center" :animation="true" class="class-popup-style">
+    <uni-popup ref="posterShow" background-color="transparent" type="center" :animation="true" class="class-popup-style poster-popup-root">
       <view class="poster-popup-wrap">
-        <text class="poster-close" @click="closePoster()">×</text>
+        <view class="poster-popup-head">
+          <text class="poster-popup-title">分享海报</text>
+          <text class="poster-close" @click="closePoster()">×</text>
+        </view>
         <view class="poster-img-wrap">
-          <image class="poster-img" :src="posterUrl" mode="widthFix" />
+          <image class="poster-img" :src="posterUrl" mode="widthFix" show-menu-by-longpress />
         </view>
+        <text class="poster-tip">长按图片可保存，或点击下方按钮</text>
         <view class="poster-save-wrap">
-          <button class="admin-button-com big blue poster-save-btn" @click="downloadImg">保存图片</button>
+          <button class="admin-button-com big blue poster-save-btn" @click="downloadImg">保存到相册</button>
         </view>
       </view>
     </uni-popup>
@@ -1070,42 +1074,65 @@ page {
 
 .poster-popup-wrap {
   display: flex;
-  width: 100vw;
-  padding: 20upx 20upx 40upx;
+  width: 86vw;
+  max-width: 640upx;
+  padding: 28upx 28upx 36upx;
   flex-direction: column;
   align-items: center;
-  max-height: 100vh;
+  max-height: 92vh;
   overflow: auto;
-  position: relative;
+  background: #fff;
+  border-radius: 24upx;
+  box-shadow: 0 16upx 48upx rgba(0, 0, 0, 0.18);
+}
+
+.poster-popup-head {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8upx;
+}
+
+.poster-popup-title {
+  font-size: 32upx;
+  font-weight: 600;
+  color: #1a1a1a;
 }
 
 .poster-close {
-  position: absolute;
-  right: 50upx;
-  top: 10upx;
-  font-size: 70upx;
+  font-size: 52upx;
   line-height: 1;
+  color: #999;
+  padding: 0 8upx;
 }
 
 .poster-img-wrap {
   width: 100%;
   text-align: center;
-  margin-top: 75upx;
+  margin-top: 16upx;
 }
 
 .poster-img {
-  width: 70%;
+  width: 100%;
   margin: 0 auto;
-  border: 1upx solid #cccccc;
+  border-radius: 12upx;
+  box-shadow: 0 8upx 24upx rgba(0, 0, 0, 0.12);
+}
+
+.poster-tip {
+  margin-top: 20upx;
+  font-size: 24upx;
+  color: #999;
 }
 
 .poster-save-wrap {
   width: 100%;
-  margin-top: 65upx;
+  margin-top: 28upx;
   text-align: center;
 }
 
 .poster-save-btn {
-  width: 300upx;
+  width: 320upx;
 }
 </style>