完成开创专项竞赛活动宣传页面
This commit is contained in:
zxzz
parent
6a579374ec
commit
625e03de92
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 211 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -2,38 +2,29 @@
|
|||
<div class="home-page">
|
||||
<!-- Banner Section -->
|
||||
<div class="banner-section">
|
||||
<!-- 菜单栏 -->
|
||||
<ul>
|
||||
<a href="https://www.osredm.com"><img src="../assets/osredm.png" alt=""></a>
|
||||
<li><a href="https://www.osredm.com">首页</a></li>
|
||||
<li><a href="https://www.osredm.com/explore/all">开源项目</a></li>
|
||||
<li><a href="https://www.osredm.com/task">创客空间</a></li>
|
||||
</ul>
|
||||
<!-- 标题 -->
|
||||
<div class="logo-and-title">
|
||||
<img class="banner-logo" src="../assets/kc-logo.png" />
|
||||
<div class="banner-blank"></div>
|
||||
<img class="banner-title" src="../assets/kc-title.png" />
|
||||
</div>
|
||||
<div class="download-button">宣传视频下载</div>
|
||||
<!-- 下载视频 -->
|
||||
<button class="download-button" @click="downloadVideo">宣传视频下载</button>
|
||||
<!-- waves -->
|
||||
<svg
|
||||
class="waves"
|
||||
viewBox="0 24 150 28"
|
||||
preserveAspectRatio="none"
|
||||
shapeRendering="auto"
|
||||
>
|
||||
<svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
||||
<defs>
|
||||
<path
|
||||
id="wave-path"
|
||||
d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
|
||||
/>
|
||||
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use
|
||||
href="#wave-path"
|
||||
x="50"
|
||||
y="3"
|
||||
fill="rgba(255,255,255,0.6)"
|
||||
/>
|
||||
<use
|
||||
href="#wave-path"
|
||||
x="50"
|
||||
y="0"
|
||||
fill="rgba(255,255,255,0.45)"
|
||||
/>
|
||||
<use href="#wave-path" x="50" y="3" fill="rgba(255,255,255,0.6)" />
|
||||
<use href="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.45)" />
|
||||
<use href="#wave-path" x="50" y="9" fill="#dae5ff" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
@ -41,39 +32,17 @@
|
|||
|
||||
<!-- Video Section -->
|
||||
<div class="video-section">
|
||||
<video
|
||||
class="video-box"
|
||||
<video class="video-box"
|
||||
src="https://osredm-oss.obs.cn-north-4.myhuaweicloud.com/%E5%BC%80%E5%88%9B%E6%B4%BB%E5%8A%A80315-%E5%85%AC%E5%BC%80%E7%89%88.mp4"
|
||||
controls
|
||||
autoplay
|
||||
muted
|
||||
></video>
|
||||
controls autoplay muted></video>
|
||||
<!-- waves -->
|
||||
<svg
|
||||
class="waves"
|
||||
viewBox="0 24 150 28"
|
||||
preserveAspectRatio="none"
|
||||
shapeRendering="auto"
|
||||
>
|
||||
<svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
||||
<defs>
|
||||
<path
|
||||
id="wave-path"
|
||||
d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
|
||||
/>
|
||||
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use
|
||||
href="#wave-path"
|
||||
x="50"
|
||||
y="3"
|
||||
fill="rgba(0,55,175,0.2)"
|
||||
/>
|
||||
<use
|
||||
href="#wave-path"
|
||||
x="50"
|
||||
y="0"
|
||||
fill="rgba(0,55,175,0.2)"
|
||||
/>
|
||||
<use href="#wave-path" x="50" y="3" fill="rgba(0,55,175,0.2)" />
|
||||
<use href="#wave-path" x="50" y="0" fill="rgba(0,55,175,0.2)" />
|
||||
<use href="#wave-path" x="50" y="9" fill="#180e8d" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
@ -82,53 +51,26 @@
|
|||
<!-- 简介 Section -->
|
||||
<div class="intro-section" id="intro">
|
||||
<div class="intro-box">
|
||||
<!-- <p>项目简介</p> -->
|
||||
<div class="intro-title-box">
|
||||
<img
|
||||
class="aside-img"
|
||||
src="../assets/left-icon.png"
|
||||
alt=""
|
||||
/>
|
||||
<img class="aside-img" src="../assets/left-icon.png" alt="" />
|
||||
<h1 class="intro-title">项目简介</h1>
|
||||
<img
|
||||
class="aside-img"
|
||||
src="../assets/right-icon.png"
|
||||
alt=""
|
||||
/>
|
||||
<img class="aside-img" src="../assets/right-icon.png" alt="" />
|
||||
</div>
|
||||
<dir class="intro-text-box">
|
||||
<div class="intro-text-box">
|
||||
<p>项目名称：“开创”系列军事需求解决方案创意征集行动。</p>
|
||||
<p>
|
||||
选题类别和范围、提案模板等信息，请与项目联络员联系。贾龙飞，19158870920。....
|
||||
选题类别和范围、提案模板等信息，请与项目联络员联系。贾龙飞，19158870920。
|
||||
</p>
|
||||
</dir>
|
||||
</div>
|
||||
</div>
|
||||
<!-- waves -->
|
||||
<svg
|
||||
class="waves"
|
||||
viewBox="0 24 150 28"
|
||||
preserveAspectRatio="none"
|
||||
shapeRendering="auto"
|
||||
>
|
||||
<svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
||||
<defs>
|
||||
<path
|
||||
id="wave-path"
|
||||
d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
|
||||
/>
|
||||
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use
|
||||
href="#wave-path"
|
||||
x="50"
|
||||
y="3"
|
||||
fill="rgba(255,255,255,0.6)"
|
||||
/>
|
||||
<use
|
||||
href="#wave-path"
|
||||
x="50"
|
||||
y="0"
|
||||
fill="rgba(255,255,255,0.45)"
|
||||
/>
|
||||
<use href="#wave-path" x="50" y="3" fill="rgba(255,255,255,0.6)" />
|
||||
<use href="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.45)" />
|
||||
<use href="#wave-path" x="50" y="9" fill="#dae5ff" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
@ -136,27 +78,96 @@
|
|||
|
||||
<!-- logo Section -->
|
||||
<div class="logo-section" id="bigLogo">
|
||||
<div class="logo-box"></div>
|
||||
<!-- <p>项目LOGO</p> -->
|
||||
<div class="logo-box">
|
||||
<div class="logo-title-box">
|
||||
<img class="aside-img" src="../assets/left-icon.png" alt="" />
|
||||
<h1 class="logo-title">项目LOGO</h1>
|
||||
<img class="aside-img" src="../assets/right-icon.png" alt="" />
|
||||
</div>
|
||||
<div class="logo-icon-box">
|
||||
<img src="../assets/red-kc-logo.png" alt="">
|
||||
<img src="../assets/blue-kc-logo.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- waves -->
|
||||
<svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
||||
<defs>
|
||||
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use href="#wave-path" x="50" y="3" fill="rgba(0,55,175,0.2)" />
|
||||
<use href="#wave-path" x="50" y="0" fill="rgba(0,55,175,0.2)" />
|
||||
<use href="#wave-path" x="50" y="9" fill="#180e8d" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 宣传海报 Section -->
|
||||
<div class="poster-section" id="poster">
|
||||
<div class="poster-box"></div>
|
||||
<!-- <p>宣传海报</p> -->
|
||||
<div class="poster-box">
|
||||
<div class="poster-title-box">
|
||||
<img class="aside-img" src="../assets/left-icon.png" alt="" />
|
||||
<h1 class="poster-title">宣传海报</h1>
|
||||
<img class="aside-img" src="../assets/right-icon.png" alt="" />
|
||||
</div>
|
||||
<div class="poster-picture-box">
|
||||
<img src="../assets/poster-one.png" alt="">
|
||||
<img src="../assets/poster-two.png" alt="">
|
||||
<img src="../assets/poster-three.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<!-- waves -->
|
||||
<svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shapeRendering="auto">
|
||||
<defs>
|
||||
<path id="wave-path" d="M-160 44c30 0 58-18 88-18s58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
|
||||
</defs>
|
||||
<g class="parallax">
|
||||
<use href="#wave-path" x="50" y="3" fill="rgba(255,255,255,0.6)" />
|
||||
<use href="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.45)" />
|
||||
<use href="#wave-path" x="50" y="9" fill="rgb(22, 32, 70)" />
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- footer Section -->
|
||||
<div class="footer-section" id="footer"></div>
|
||||
<div class="footer-section" id="footer">
|
||||
<p>
|
||||
<span class="mail"><img src="../assets/youxiang.png"
|
||||
alt=""> support@osredm.com </span>
|
||||
<span class="address"><img src="../assets/dituguanli.png" alt=""> 北京市海淀区西三环北路72号</span>
|
||||
</p>
|
||||
<p>
|
||||
<a href="https://www.osredm.com/">版权所有：红山开源社区 </a>
|
||||
<a class="police" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802034576">
|
||||
<img class="police-img" src="https://forge.osredm.com/police.png" /> 京公网安备 11010802034576 号</a>
|
||||
<a class="police-number"
|
||||
href="https://beian.miit.gov.cn/#/Integrated/index"> 京ICP备2021005060-1</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "HomePage",
|
||||
methods: {
|
||||
downloadVideo() {
|
||||
// 创建一个a标签
|
||||
const link = document.createElement('a');
|
||||
// 设置视频的URL
|
||||
link.href = 'https://osredm-oss.obs.cn-north-4.myhuaweicloud.com/%E5%BC%80%E5%88%9B%E6%B4%BB%E5%8A%A80315-%E5%85%AC%E5%BC%80%E7%89%88%2B%E7%BA%A2%E5%B1%B1%E5%BC%80%E6%BA%90logo.mp4'; // 将XXX替换为视频的实际URL
|
||||
// 设置下载属性，给下载的文件命名为kaichaung-video.mp4
|
||||
link.setAttribute('download', 'kaichaung-video.mp4');
|
||||
// 模拟点击a标签以开始下载
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
// 移除a标签
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.banner-section {
|
||||
width: 100%;
|
||||
|
|
@ -167,6 +178,45 @@ export default {
|
|||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: 450px;
|
||||
height: 75px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 50px;
|
||||
|
||||
img {
|
||||
width: 130px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
outline: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
color: rgb(88, 93, 230);
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
height: auto;
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.logo-and-title {
|
||||
width: 1300px;
|
||||
height: auto;
|
||||
|
|
@ -175,6 +225,7 @@ export default {
|
|||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
|
||||
.banner-logo {
|
||||
width: 200px;
|
||||
height: auto;
|
||||
|
|
@ -184,6 +235,7 @@ export default {
|
|||
width: 30px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
width: 1070px;
|
||||
height: auto;
|
||||
|
|
@ -203,6 +255,11 @@ export default {
|
|||
bottom: 12%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: darken(#3466ee, 10%); // 在原背景颜色基础上加深10%
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -224,7 +281,7 @@ export default {
|
|||
|
||||
.intro-section {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
height: 600px;
|
||||
background-color: #180e8d;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -236,8 +293,67 @@ export default {
|
|||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.intro-title-box {
|
||||
height: 150px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 60px;
|
||||
|
||||
.aside-img {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.intro-title {
|
||||
width: 200px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-text-box {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 200px;
|
||||
width: 900px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
background: #234DC0;
|
||||
border: 2px solid #A1B4FF;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
font-size: 17px;
|
||||
margin-left: 100px;
|
||||
text-align: left;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
width: 100%;
|
||||
height: 560px;
|
||||
background-color: #dae5ff;
|
||||
position: relative;
|
||||
|
||||
.logo-box {
|
||||
width: 1100px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
.logo-title-box {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
|
@ -249,50 +365,36 @@ export default {
|
|||
height: auto;
|
||||
}
|
||||
|
||||
.intro-title {
|
||||
.logo-title {
|
||||
width: 200px;
|
||||
color: #180E8D;
|
||||
}
|
||||
}
|
||||
|
||||
.intro-text-box {
|
||||
.logo-icon-box {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
p {
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
margin-left: 100px;
|
||||
img {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
margin: 0px 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo-section {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
background-color: #dae5ff;
|
||||
position: relative;
|
||||
.logo-box {
|
||||
width: 1100px;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
.poster-section {
|
||||
width: 100%;
|
||||
height: 600px;
|
||||
height: 800px;
|
||||
background-color: #180e8d;
|
||||
position: relative;
|
||||
|
||||
.poster-box {
|
||||
width: 1100px;
|
||||
height: 100%;
|
||||
|
|
@ -300,6 +402,42 @@ export default {
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
color: #ffffff;
|
||||
|
||||
.poster-title-box {
|
||||
height: 200px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 25px;
|
||||
|
||||
img {
|
||||
width: 200x;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.poster-title {
|
||||
width: 200px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.poster-picture-box {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
margin: 0px 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -307,8 +445,51 @@ export default {
|
|||
width: 100%;
|
||||
height: 200px;
|
||||
background-color: rgb(22, 32, 70);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #cccccc;
|
||||
font-size: 12px;
|
||||
letter-spacing: 1px;
|
||||
|
||||
p {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
|
||||
img {
|
||||
width: 15px;
|
||||
}
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
outline: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
color: rgb(250, 197, 53);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.police-img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* 波浪效果 - 起 */
|
||||
.waves {
|
||||
width: 100%;
|
||||
|
|
@ -319,29 +500,35 @@ export default {
|
|||
bottom: -2px;
|
||||
height: 10vh;
|
||||
}
|
||||
.parallax > use {
|
||||
|
||||
.parallax>use {
|
||||
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
|
||||
}
|
||||
.parallax > use:nth-child(1) {
|
||||
|
||||
.parallax>use:nth-child(1) {
|
||||
animation-delay: -2s;
|
||||
animation-duration: 7s;
|
||||
}
|
||||
.parallax > use:nth-child(2) {
|
||||
|
||||
.parallax>use:nth-child(2) {
|
||||
animation-delay: -3s;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
.parallax > use:nth-child(3) {
|
||||
|
||||
.parallax>use:nth-child(3) {
|
||||
animation-delay: -4s;
|
||||
animation-duration: 13s;
|
||||
}
|
||||
|
||||
@keyframes move-forever {
|
||||
0% {
|
||||
transform: translate3d(-90px, 0, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translate3d(85px, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 波浪效果 - 止 */
|
||||
</style>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue