完成分享页面优化

.env.development

@@ -1,6 +1,6 @@
 VITE_MODE=development
 VITE_APP_TYPE=dev
 VITE_PROJECT_TITLE=要易小助手
-# VITE_BASE_API=https://pre1.yaoyi.net
-VITE_BASE_API=https://preapi.yaoyi.net
+VITE_BASE_API=https://pre1.yaoyi.net
+# VITE_BASE_API=https://preapi.yaoyi.net
 VITE_WX_APPID=wxd03398e1bff2b241

src/pages/information/components/academic/AcademicArticleItem.vue

@@ -24,10 +24,17 @@
         :data-title="item.title"
         :data-id="item.id"
         data-active-tab="academic"
-        @click.stop
+        @tap.stop
       >
-        <image class="share-icon" :src="shareIconUrl" mode="aspectFit" />
-        <text class="share-text">转发</text>
+        <view class="share-button__content">
+          <wd-icon
+            name="share-internal"
+            size="24rpx"
+            color="#2f8be6"
+            custom-class="share-button__icon"
+          />
+          <text class="share-button__text">转发</text>
+        </view>
       </button>
     </view>
   </view>
@@ -40,7 +47,6 @@ import type { ArticleItem } from '@/services/modules/information/type'
 
 const props = defineProps<{
   item: ArticleItem
-  shareIconUrl: string
 }>()
 
 const emit = defineEmits<{
@@ -155,41 +161,53 @@ const stripHtml = (value?: string): string => {
   line-height: 34rpx;
   color: #c4cad4;
 }
-
 .share-button {
-  display: flex;
   flex-shrink: 0;
+
+  display: flex;
   align-items: center;
   justify-content: center;
-  gap: 8rpx;
 
-  min-width: 142rpx;
-  height: 56rpx;
+  min-width: 126rpx;
+  height: 52rpx;
   padding: 0 22rpx;
   margin: 0;
 
-  line-height: 56rpx;
-  background: linear-gradient(135deg, #eef8ff 0%, #e8f4ff 100%);
-  border: none;
+  border: 1rpx solid rgba(47, 139, 230, 0.12);
   border-radius: 999rpx;
+  background: #f1f8ff;
+
+  line-height: 1;
+  box-shadow: 0 4rpx 12rpx rgba(47, 139, 230, 0.08);
 }
 
 .share-button::after {
   border: none;
 }
 
-.share-button--hover {
-  opacity: 0.78;
+.share-button__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6rpx;
+
+  height: 100%;
+  line-height: 1;
 }
 
-.share-icon {
-  width: 28rpx;
-  height: 28rpx;
+.share-button__icon {
+  flex-shrink: 0;
+  line-height: 1;
 }
 
-.share-text {
+.share-button__text {
   font-size: 26rpx;
   font-weight: 500;
-  color: #318fe8;
+  color: #2f8be6;
+  line-height: 1;
+}
+
+.share-button--hover {
+  opacity: 0.82;
 }
 </style>

src/pages/information/components/academic/AcademicInfoPanel.vue

@@ -11,7 +11,6 @@
         v-for="item in articleList"
         :key="item.id"
         :item="item"
-        :share-icon-url="shareIconUrl"
         @select="handleArticleClick"
       />
 
@@ -41,7 +40,6 @@ import InformationBannerSwiper from './InformationBannerSwiper.vue'
 import InformationSearchBar from './InformationSearchBar.vue'
 
 const PAGE_SIZE = 10
-const shareIconUrl = 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/fenxiang.png'
 
 const userStore = useUserStore()
 

src/pages/information/components/album/ProductAlbumItem.vue

@@ -28,16 +28,23 @@
         </text>
 
         <button
-          class="forward-button"
-          hover-class="forward-button--hover"
+          class="share-button"
+          hover-class="share-button--hover"
           open-type="share"
-          :data-title="albumTitle"
+          :data-title="item.title"
           :data-id="item.id"
-          :data-active-tab="activeTab"
-          @click.stop
+          data-active-tab="academic"
+          @tap.stop
         >
-          <image class="forward-icon" :src="shareIconUrl" mode="aspectFit" />
-          <text class="forward-text">转发</text>
+          <view class="share-button__content">
+            <wd-icon
+              name="share-internal"
+              size="24rpx"
+              color="#2f8be6"
+              custom-class="share-button__icon"
+            />
+            <text class="share-button__text">转发</text>
+          </view>
         </button>
       </view>
     </view>
@@ -51,7 +58,6 @@ import type { AlbumPageNewItem } from '@/services/modules/information/type'
 
 const props = defineProps<{
   item: AlbumPageNewItem
-  shareIconUrl: string
   activeTab: string
 }>()
 
@@ -228,42 +234,53 @@ const stripHtml = (value: string): string => {
   font-size: 25rpx;
   line-height: 34rpx;
 }
+.share-button {
+  flex-shrink: 0;
 
-.forward-button {
   display: flex;
-  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  gap: 8rpx;
-  min-width: 136rpx;
-  height: 56rpx;
-  padding: 0 20rpx;
+
+  min-width: 126rpx;
+  height: 52rpx;
+  padding: 0 22rpx;
   margin: 0;
-  color: #318fe8;
-  line-height: 56rpx;
-  background: #eef8ff;
-  border: none;
+
+  border: 1rpx solid rgba(47, 139, 230, 0.12);
   border-radius: 999rpx;
+  background: #f1f8ff;
+
+  line-height: 1;
+  box-shadow: 0 4rpx 12rpx rgba(47, 139, 230, 0.08);
 }
 
-.forward-button::after {
+.share-button::after {
   border: none;
 }
 
-.forward-button--hover {
-  opacity: 0.72;
+.share-button__content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6rpx;
+
+  height: 100%;
+  line-height: 1;
 }
 
-.forward-icon {
+.share-button__icon {
   flex-shrink: 0;
-  width: 28rpx;
-  height: 28rpx;
+  line-height: 1;
 }
 
-.forward-text {
-  color: #318fe8;
+.share-button__text {
   font-size: 26rpx;
   font-weight: 500;
-  line-height: 56rpx;
+  color: #2f8be6;
+  line-height: 1;
+}
+
+.share-button--hover {
+  opacity: 0.82;
 }
 </style>

src/pages/information/components/album/ProductAlbumPanel.vue

@@ -24,7 +24,6 @@
         v-for="item in albumList"
         :key="item.id"
         :item="item"
-        :share-icon-url="SHARE_ICON_URL"
         :active-tab="ACTIVE_TAB"
         @select="handleAlbumClick"
       />
@@ -56,7 +55,6 @@ import ProductAlbumItem from './ProductAlbumItem.vue'
 
 const PAGE_SIZE = 10
 const ACTIVE_TAB = 'album'
-const SHARE_ICON_URL = 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/fenxiang.png'
 
 const userStore = useUserStore()
 

src/pages/information/detail/index.vue

@@ -158,22 +158,4 @@ const formatRichText = (html: string): string => {
   font-size: 28rpx;
   text-align: center;
 }
-
-:deep(p) {
-  margin: 0 0 22rpx;
-}
-
-:deep(img) {
-  max-width: 100%;
-  height: auto;
-  display: block;
-  margin: 20rpx 0;
-}
-
-:deep(video) {
-  width: 100%;
-  height: auto;
-  display: block;
-  margin: 20rpx 0;
-}
 </style>