工作协同

pages/preview/file.vue

@@ -2,8 +2,12 @@
   <view class="page">
     <fy-header title="附件预览" back />
     <view class="body">
-      <text class="name">{{ name || '附件' }}</text>
-      <view class="btn-primary" @click="open">打开 / 预览</view>
+      <view class="card sheet">
+        <view class="mark">文</view>
+        <text class="name">{{ name || '附件' }}</text>
+        <text class="hint">系统会用本机应用打开这个附件</text>
+      </view>
+      <wd-button type="primary" block size="large" @click="open">打开 / 预览</wd-button>
     </view>
   </view>
 </template>
@@ -31,6 +35,14 @@ export default {
 </script>
 
 <style scoped>
-.body { padding: 48rpx 32rpx; }
-.name { display: block; font-size: 28rpx; margin-bottom: 32rpx; text-align: center; }
+.body { padding: 32rpx 24rpx; }
+.sheet { padding: 48rpx 32rpx; margin-bottom: 32rpx; display: flex; flex-direction: column; align-items: center; }
+.mark {
+  width: 112rpx; height: 112rpx; border-radius: 28rpx;
+  background: #E8F1FF; color: #1677FF;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 44rpx; font-weight: 650;
+}
+.name { display: block; margin-top: 24rpx; font-size: 30rpx; font-weight: 650; color: #111827; text-align: center; word-break: break-all; }
+.hint { display: block; margin-top: 12rpx; font-size: 24rpx; color: #6B7280; text-align: center; }
 </style>