主页视频更名,视频banner统一管理

This commit is contained in:
zhcnyuyang 2025-05-15 14:49:08 +08:00
parent 4ad6d8a350
commit d9eb7cb1c6
3 changed files with 44 additions and 16 deletions

BIN
public/ExpVideo.mp4 Normal file

Binary file not shown.

View File

@ -4,11 +4,11 @@ import Partners from './Tools/Partners.vue'
</script> </script>
<template> <template>
<div id="homepageroot" class="pageroot"> <div id="homepageroot" class="pageroot">
<div id="homepagebanner" style="width: 100%;height: auto;background-color: black; position: relative"> <div id="homepagebanner" class="videorootbanner">
<video poster="/bannervideopreload.png" controls="" id="bannervideo" muted autoplay="autoplay" loop="loop" playsinline webkit-playsinline style="width: 100%;z-index: 0;"> <video poster="/bannervideopreload.png" controls="" id="bannervideo" muted autoplay="autoplay" loop="loop" playsinline webkit-playsinline class="bannervideos">
<source src="/HpgVideo.mp4" type="video/mp4"></source> <source src="/HpgVideo.mp4" type="video/mp4"></source>
</video> </video>
<div id="hpbanner"> <div id="hpbanner" class="bannerovervideo">
<div class="bannercontent"> <div class="bannercontent">
<span class="banner1">为用户创造美好体验<br /></span> <span class="banner1">为用户创造美好体验<br /></span>
<span class="banner2">驱动商业可持续增长</span> <span class="banner2">驱动商业可持续增长</span>
@ -201,19 +201,19 @@ export default {
} }
#hpbanner{ #hpbanner{
position: absolute; //position: absolute;
top: 0; //top: 0;
left: 0; //left: 0;
width: 100%; //width: 100%;
height: 100%; //height: 100%;
margin-left: 0; //margin-left: 0;
margin-top: 0; //margin-top: 0;
background-color: rgba(0, 0, 0, 0.5); //background-color: rgba(0, 0, 0, 0.5);
display: flex; //display: flex;
align-items: center; //align-items: center;
justify-content: flex-start; //justify-content: flex-start;
z-index: 2; //z-index: 2;
pointer-events: none; //pointer-events: none;
} }
#secondwhite #secondwhite

View File

@ -34,6 +34,34 @@
} }
} }
.videorootbanner{
width: 100%;
height: auto;
background-color: black;
position: relative
}
.bannervideos{
width: 100%;
z-index: 0;
}
.bannerovervideo{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin-left: 0;
margin-top: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: flex-start;
z-index: 2;
pointer-events: none;
}
.bannercontent{ .bannercontent{
text-align: left; text-align: left;
position: relative; position: relative;