浏览代码

feat:association&picture

0235967 2 周之前
父节点
当前提交
76ceaf83f7

二进制
travel-web/public/public/images/chihong.webp


二进制
travel-web/public/public/images/zengshaoxiong.webp


二进制
travel-web/public/public/images/zhangmingyuan.webp


二进制
travel-web/public/public/images/zhuhong.webp


+ 6 - 6
travel-web/src/modules/pc-home/pages/page-association/page-association.html

@@ -21,30 +21,30 @@
     
     <div class="leaders-container">
       <div class="leader-card">
-        <div class="leader-img"></div>
+        <div class="leader-img" style="background-image: url('public/images/zhuhong.webp');"></div>
         <div class="leader-info">
           <div class="ar-tag">AR名片</div>
-          <h3 class="leader-name">张明远</h3>
+          <h3 class="leader-name">朱虹</h3>
           <p class="leader-title">协会主席 · 江西文化研究专家</p>
           <p class="leader-desc">负责协会全面工作,主管学术研究、对外交流。曾主持国家级文化研究项目5项,出版专著8部。</p>
         </div>
       </div>
       
       <div class="leader-card">
-        <div class="leader-img"></div>
+        <div class="leader-img" style="background-image: url('public/images/chihong.webp');"></div>
         <div class="leader-info">
           <div class="ar-tag">AR名片</div>
-          <h3 class="leader-name">李红梅</h3>
+          <h3 class="leader-name">池红</h3>
           <p class="leader-title">常务副主席 · 非遗保护专家</p>
           <p class="leader-desc">分管会员服务、人才培养工作。致力于江西非物质文化遗产保护与数字化传承20余年。</p>
         </div>
       </div>
       
       <div class="leader-card">
-        <div class="leader-img"></div>
+        <div class="leader-img" style="background-image: url('public/images/zengshaoxiong.webp');"></div>
         <div class="leader-info">
           <div class="ar-tag">AR名片</div>
-          <h3 class="leader-name">王建国</h3>
+          <h3 class="leader-name">曾少雄</h3>
           <p class="leader-title">秘书长 · 数字技术专家</p>
           <p class="leader-desc">分管技术研发、平台建设工作。主持开发多个省级文化数字化平台,获国家专利3项。</p>
         </div>

+ 20 - 14
travel-web/src/modules/pc-home/pages/page-association/page-association.scss

@@ -155,22 +155,28 @@ body {
 .leader-img {
   width: 150px;
   height: 180px;
-  background: #ddd;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
   position: relative;
+  border-radius: 50% / 60%; /* 水平半径50%,垂直半径60% */
   overflow: hidden;
-}
-
-.leader-img::after {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: radial-gradient(circle, transparent 60%, rgba(0,0,0,0.7));
-  border: 5px solid var(--wood-light);
-  border-radius: 50%;
-  box-sizing: border-box;
+  
+  /* 移除或修改原有的伪元素样式 */
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 3px solid var(--wood-light);
+    border-radius: 50% / 60%; /* 与父元素保持一致 */
+    box-sizing: border-box;
+    pointer-events: none;
+    /* 调整渐变效果 */
+    background: radial-gradient(circle, transparent 60%, rgba(0,0,0,0.2));
+  }
 }
 
 .leader-info {