样式调整

src/views/withmind/assets/index.rem.css

@@ -2094,3 +2094,8 @@ html {
 .text_nav_practice.nav-active {
   color: rgba(25, 140, 255, 1) !important;
 }
+
+/* footer 创作平台列 — AI 创作项向左挪 1rem(只这一项,不影响 知识库/Agent) */
+.text_41_ai_create {
+  margin-left: -1rem;
+}

src/views/withmind/index.vue

@@ -181,7 +181,7 @@
       <div class="block_3 flex-col justify-between">
         <div class="group_13 flex-row justify-between">
           <div class="text-wrapper_4 flex-col justify-between">
-            <span class="text_21">新媒体应用：</span>
+            <span class="text_21">AI创作：</span>
             <span class="text_22">让传播精准触达</span>
           </div>
           <div class="group_14 flex-col"><div class="box_5 flex-col"></div></div>
@@ -239,6 +239,73 @@
         <span class="practice_text_25">24小时新员工培训导师</span>
       </div>
     </div>
+    <!-- 应用实践 row2:3 图 + 1 视频(独立 4 个元素手写一排) -->
+    <div class="practice_row2 flex-row justify-between" id="row2">
+      <div class="practice_row2_item flex-col justify-between">
+        <img
+          class="practice_row2_img"
+          referrerpolicy="no-referrer"
+          src="/img/wuxu.png"
+        />
+        <span class="practice_row2_caption">无需设计功底，一键生成品牌视觉</span>
+      </div>
+      <div class="practice_row2_item practice_row2_item--video flex-col justify-between">
+        <div class="practice_row2_video_placeholder">
+          <img
+            class="practice_row2_img"
+            referrerpolicy="no-referrer"
+            src="/img/yici.png"
+          />
+          <div class="practice_row2_play_icon">▶</div>
+        </div>
+        <span class="practice_row2_caption">一次可创作多图文/视频</span>
+      </div>
+      <div class="practice_row2_item flex-col justify-between">
+        <img
+          class="practice_row2_img"
+          referrerpolicy="no-referrer"
+          src="/img/qiye.png"
+        />
+        <span class="practice_row2_caption">企业品牌海报</span>
+      </div>
+      <div
+        class="practice_row2_item practice_row2_item--video flex-col justify-between"
+        @click="openVideo('xuanchuan')"
+      >
+        <div class="practice_row2_video_placeholder practice_row2_video_placeholder--cover">
+          <img
+            class="practice_row2_cover"
+            referrerpolicy="no-referrer"
+            src="/img/chahua.png"
+          />
+          <div class="practice_row2_play_icon_big">▶</div>
+        </div>
+        <span class="practice_row2_caption">企业宣传视频</span>
+      </div>
+    </div>
+
+    <!-- 视频弹窗(v7.2,Vue 状态控制) -->
+    <transition name="modal">
+      <div
+        v-if="videoModalOpen"
+        class="video-modal-mask"
+        @click.self="closeVideo"
+      >
+        <div class="video-modal-box" @click.stop>
+          <button class="video-modal-close" @click="closeVideo" aria-label="关闭">×</button>
+          <video
+            v-if="videoModalOpen"
+            ref="modalVideo"
+            class="video-modal-video"
+            referrerpolicy="no-referrer"
+            :src="videoModalSrc"
+            controls
+            preload="metadata"
+          ></video>
+        </div>
+      </div>
+    </transition>
+
     <div class="group_15 flex-row" id="gateway">
       <div class="group_16 flex-col">
         <div class="group_17 flex-col">
@@ -423,13 +490,14 @@
           <div class="text-group_10 flex-col">
             <span class="text_39 nav-link" @click="scrollTo('platform')">知识库</span>
             <span class="text_40 nav-link" @click="scrollTo('agent')">Agent</span>
-            <span class="text_41 nav-link" @click="scrollTo('media')">新媒体应用</span>
+            <span class="text_41 text_41_ai_create nav-link" @click="scrollTo('media')">AI创作</span>
           </div>
           <div class="practice_footer_col flex-col">
             <span class="practice_footer_col_item nav-link" @click="scrollTo('practice')">员工问答</span>
             <span class="practice_footer_col_item nav-link" @click="scrollTo('practice')">获取文案</span>
             <span class="practice_footer_col_item nav-link" @click="scrollTo('practice')">标准话术</span>
             <span class="practice_footer_col_item nav-link" @click="scrollTo('practice')">培训导师</span>
+            <span class="practice_footer_col_item practice_footer_col_item--video nav-link" @click="scrollTo('row2')">图文/视频</span>
           </div>
           <div class="text-group_11 flex-col">
             <span class="text_42 nav-link" @click="scrollTo('gateway')">获取秘钥</span>
@@ -557,11 +625,18 @@ export default {
     return {
       constants: {},
       activeSection: 'top',
-      scrollLocked: false
+      scrollLocked: false,
+      videoModalOpen: false,
+      videoModalSrc: '',
+      videoModalKey: ''
     };
   },
   mounted() {
     this.initScrollSpy();
+    window.addEventListener('keydown', this.onModalKeydown);
+  },
+  beforeDestroy() {
+    window.removeEventListener('keydown', this.onModalKeydown);
   },
   methods: {
     initScrollSpy() {
@@ -620,6 +695,45 @@ export default {
       }
       setTimeout(() => this.scrollTo('about'), 200);
     },
+    openVideo(key) {
+      // 视频文件与封面映射集中放这里,以后加视频就在这加分支
+      const map = {
+        xuanchuan: {
+          src: '/img/xuanchuan.mp4'
+        }
+      };
+      const cfg = map[key];
+      if (!cfg) return;
+      this.videoModalKey = key;
+      this.videoModalSrc = cfg.src;
+      this.videoModalOpen = true;
+      // 锁住页面滚动,避免背景跟着滚
+      document.body.style.overflow = 'hidden';
+      // 等 <video> 节点挂载到 DOM 后自动播放
+      // (用户已点过一次封面,这次点击属于手势,大部分浏览器允许出声)
+      this.$nextTick(() => {
+        const v = this.$refs.modalVideo;
+        if (v) {
+          const p = v.play();
+          if (p && typeof p.catch === 'function') {
+            p.catch(() => { /* 被浏览器策略拦下时静默,可手动点 controls 播 */ });
+          }
+        }
+      });
+    },
+    closeVideo() {
+      this.videoModalOpen = false;
+      document.body.style.overflow = '';
+      // 等 transition 走完再清 src(防止 src 提前清掉导致 video 元素残留边框)
+      setTimeout(() => {
+        this.videoModalSrc = '';
+      }, 250);
+    },
+    onModalKeydown(e) {
+      if (e.key === 'Escape' && this.videoModalOpen) {
+        this.closeVideo();
+      }
+    },
     scrollTo(id) {
       this.activeSection = id;
       const suppressMs = 2000;
@@ -645,6 +759,10 @@ export default {
         } else if (id === 'skills') {
           const top = el.getBoundingClientRect().top + window.pageYOffset - 200;
           window.scrollTo({ top: top, behavior: 'smooth' });
+        } else if (id === 'row2') {
+          // 应用实践 row2:scrollTo 偏移收窄,标题已对齐底部
+          const top = el.getBoundingClientRect().top + window.pageYOffset - 60;
+          window.scrollTo({ top: top, behavior: 'smooth' });
         } else {
           const top = el.getBoundingClientRect().top + window.pageYOffset - 460;
           window.scrollTo({ top: top, behavior: 'smooth' });
@@ -805,7 +923,7 @@ export default {
   text-align: center;
   white-space: nowrap;
   line-height: 0.96rem;
-  margin-top: 0.374rem;
+  margin-top: 40px;
 }
 
 .practice_image_text_15 {
@@ -831,7 +949,7 @@ export default {
   text-align: center;
   white-space: nowrap;
   line-height: 0.96rem;
-  margin-top: 0.374rem;
+  margin-top: 40px;
 }
 
 .practice_image_text_16 {
@@ -857,7 +975,7 @@ export default {
   text-align: center;
   white-space: nowrap;
   line-height: 0.96rem;
-  margin-top: 0.374rem;
+  margin-top: 40px;
 }
 
 .practice_box_25 {
@@ -893,14 +1011,230 @@ export default {
   text-align: center;
   white-space: nowrap;
   line-height: 0.96rem;
-  margin-top: 0.374rem;
+  margin-top: 40px;
+}
+
+/* ============ 应用实践 row2 (v7, 3 图 + 1 视频) ============ */
+.practice_row2 {
+  width: 37.334rem;
+  min-height: 8.267rem;
+  margin: 110px 0 0 6.934rem;
+}
+
+.practice_row2_item {
+  width: 8.534rem;
+  min-height: 8.267rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.practice_row2_item + .practice_row2_item {
+  margin-left: 1.067rem;
+}
+
+.practice_row2_img {
+  width: 8.534rem;
+  height: 6.934rem;
+  object-fit: contain;
+  border-radius: 16px;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+/* 视频封面专用:横屏图要 cover 撑满,中心对齐(避免头尾裁掉关键内容) */
+.practice_row2_cover {
+  width: 8.534rem;
+  height: 6.934rem;
+  object-fit: cover;
+  object-position: center center;
+  border-radius: 16px;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.practice_row2_caption {
+  width: 8.534rem;
+  height: 0.96rem;
+  overflow-wrap: break-word;
+  color: rgba(86, 86, 86, 1);
+  font-size: 0.533rem;
+  font-family: Source Han Sans CN-Regular;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 0.96rem;
+  margin-top: 40px;
+}
+
+/* 视频卡片占位框 (等待 MP4 文件) */
+.practice_row2_video_placeholder {
+  position: relative;
+  width: 8.534rem;
+  height: 6.934rem;
+  border-radius: 16px;
+  background-color: rgba(245, 245, 245, 1);
+  border: 2px solid rgba(232, 244, 255, 1);
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 当 cover 封面撑满时,去掉灰底和浅边框,让封面自己作为视觉外框 */
+.practice_row2_video_placeholder--cover {
+  background-color: transparent;
+  border: none;
+}
+
+/* 视频封面 + 播放图标叠加层 (yici.png 项) */
+.practice_row2_video_placeholder .practice_row2_img {
+  border-radius: 16px;
+}
+
+.practice_row2_play_icon {
+  position: absolute;
+  right: 0.32rem;
+  bottom: 0.32rem;
+  width: 1.067rem;
+  height: 1.067rem;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.55);
+  color: rgba(255, 255, 255, 1);
+  font-size: 0.48rem;
+  line-height: 1.067rem;
+  text-align: center;
+  pointer-events: none;
+}
+
+/* 第 4 项占位文字 */
+.practice_row2_video_pending {
+  color: rgba(153, 153, 153, 1);
+  font-size: 0.48rem;
+  font-family: Source Han Sans CN-Regular;
+  font-weight: 400;
+  text-align: center;
+}
+
+/* 实际 <video> 元素:撑满占位框,cover 裁切,圆角同图片 */
+.practice_row2_video {
+  display: block;
+  width: 8.534rem;
+  height: 6.934rem;
+  object-fit: cover;
+  border-radius: 16px;
+  background-color: rgba(0, 0, 0, 1);
+}
+
+/* 中间大三角播放按钮 (v7.2,v7.1 的右下角小三角换成中间大号) */
+.practice_row2_play_icon_big {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 1.707rem;
+  height: 1.707rem;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.55);
+  color: rgba(255, 255, 255, 1);
+  font-size: 0.747rem;
+  line-height: 1.707rem;
+  text-align: center;
+  pointer-events: none;
+  transition: transform 0.2s, background-color 0.2s;
+}
+
+/* 鼠标悬浮视频位置(item)时,大三角放大、加深 */
+.practice_row2_item--video {
+  cursor: pointer;
+}
+.practice_row2_item--video:hover .practice_row2_play_icon_big {
+  transform: translate(-50%, -50%) scale(1.12);
+  background-color: rgba(0, 0, 0, 0.72);
+}
+
+/* 鼠标悬浮视频位置时,封面图轻微变暗(强调可点) */
+.practice_row2_item--video:hover .practice_row2_img {
+  filter: brightness(0.92);
+  transition: filter 0.2s;
+}
+.practice_row2_img {
+  transition: filter 0.2s;
+}
+
+/* =================== 视频弹窗 (v7.2) =================== */
+.video-modal-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0.72);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(4px);
+}
+
+.video-modal-box {
+  position: relative;
+  width: 70vw;
+  max-width: 53.333rem;
+  background-color: rgba(0, 0, 0, 1);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
+}
+
+.video-modal-video {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 75vh;
+  background-color: rgba(0, 0, 0, 1);
+}
+
+.video-modal-close {
+  position: absolute;
+  top: 0.533rem;
+  right: 0.533rem;
+  z-index: 10;
+  width: 1.6rem;
+  height: 1.6rem;
+  border-radius: 50%;
+  border: none;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: rgba(255, 255, 255, 1);
+  font-size: 1.067rem;
+  line-height: 1.6rem;
+  cursor: pointer;
+  transition: background-color 0.2s, transform 0.15s;
+}
+.video-modal-close:hover {
+  background-color: rgba(255, 255, 255, 0.18);
+  transform: scale(1.06);
+}
+
+/* 弹窗过渡动画 */
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.22s ease;
+}
+.modal-enter-active .video-modal-box,
+.modal-leave-active .video-modal-box {
+  transition: transform 0.22s ease, opacity 0.22s ease;
+}
+.modal-enter,
+.modal-leave-to {
+  opacity: 0;
+}
+.modal-enter .video-modal-box,
+.modal-leave-to .video-modal-box {
+  transform: scale(0.94);
+  opacity: 0;
 }
 
 /* ============ footer 应用实践列 ============ */
 .practice_footer_col {
   width: 1.92rem;
-  height: 5.12rem;
+  min-height: 5.12rem;
-  margin-left: 0.947rem;
+  height: auto;
+  margin-left: 0.847rem;
 }
 
 .practice_footer_col_item {
@@ -919,4 +1253,15 @@ export default {
 .practice_footer_col_item + .practice_footer_col_item {
   margin-top: 0.427rem;
 }
+
+/* 第 5 项"图文/视频":hover 加深,点开视频(跟其他导航 hover 同亮度逻辑) */
+.practice_footer_col_item--video {
+  cursor: pointer;
+  white-space: nowrap;
+  /* "图文/视频" 5 个字符超出 1.92rem 列宽,这里允许它向右溢出显示 */
+  overflow: visible;
+}
+.practice_footer_col_item--video:hover {
+  color: rgba(255, 255, 255, 1);
+}
 </style>