样式调整
This commit is contained in:
jack
Binary file not shown.
|
After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 381 KiB |
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 404 KiB |
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
margin-left: 0.947rem;
|
||||
min-height: 5.12rem;
|
||||
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>
|
||||
Reference in New Issue
Block a user