p28943065
/
competition-kc
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

解决微信浏览器显示自动放大字体问题（使用scale缩小字体，原字号放大）

This commit is contained in:
zhangxiaozhuozhuo 2024-03-25 15:09:06 +08:00
parent 2e01cb6d2e
commit 80ecb51f42
1 changed files with 216 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

298
src/components/HomePage.vue
View File

@ -4,11 +4,17 @@
<div class="banner-section"> <div class="banner-section">
<!-- 菜单栏 --> <!-- 菜单栏 -->
<ul> <ul>
<a href="https://www.osredm.com"><img src="../assets/osredm.png" alt=""></a> <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">首页</a></li>
<li><a href="https://www.osredm.com/explore/all">开源项目</a></li> <li>
<a href="https://www.osredm.com/explore/all">开源项目</a>
</li>
<li><a href="https://www.osredm.com/task">创客空间</a></li> <li><a href="https://www.osredm.com/task">创客空间</a></li>
<li><a href="https://fc.osredm.com/competitions">开放竞赛</a></li> <li>
<a href="https://fc.osredm.com/competitions">开放竞赛</a>
</li>
<li><a href="https://fc.osredm.com/forums">论坛交流</a></li> <li><a href="https://fc.osredm.com/forums">论坛交流</a></li>
<li><a href="https://www.osredm.com/notice">公告</a></li> <li><a href="https://www.osredm.com/notice">公告</a></li>
</ul> </ul>
@ -19,15 +25,35 @@
<img class="banner-title" src="../assets/kc-title.png" /> <img class="banner-title" src="../assets/kc-title.png" />
</div> </div>
<!-- 下载视频 --> <!-- 下载视频 -->
<button class="download-button" @click="downloadVideo">宣传视频下载</button> <button class="download-button" @click="downloadVideo">
宣传视频下载
</button>
<!-- waves --> <!-- 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> <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> </defs>
<g class="parallax"> <g class="parallax">
<use href="#wave-path" x="50" y="3" fill="rgba(255,255,255,0.6)" /> <use
<use href="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.45)" /> 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" /> <use href="#wave-path" x="50" y="9" fill="#dae5ff" />
</g> </g>
</svg> </svg>
@ -35,17 +61,39 @@
<!-- Video Section --> <!-- Video Section -->
<div class="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" 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 --> <!-- 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> <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> </defs>
<g class="parallax"> <g class="parallax">
<use href="#wave-path" x="50" y="3" fill="rgba(0,55,175,0.2)" /> <use
<use href="#wave-path" x="50" y="0" fill="rgba(0,55,175,0.2)" /> 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" /> <use href="#wave-path" x="50" y="9" fill="#180e8d" />
</g> </g>
</svg> </svg>
@ -55,25 +103,50 @@
<div class="intro-section" id="intro"> <div class="intro-section" id="intro">
<div class="intro-box"> <div class="intro-box">
<div class="intro-title-box"> <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> <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> </div>
<div class="intro-text-box"> <div class="intro-text-box">
<p>项目名称：“开创”系列军事需求解决方案创意征集行动。</p> <p>项目名称：“开创”系列军事需求解决方案创意征集行动。</p>
<p> <p>选题类别和范围、提案模板等信息，请与项目联络员联系。</p>
选题类别和范围、提案模板等信息，请与项目联络员联系。贾龙飞，19158870920。 <p>贾龙飞，19158870920。</p>
</p>
</div> </div>
</div> </div>
<!-- waves --> <!-- 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> <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> </defs>
<g class="parallax"> <g class="parallax">
<use href="#wave-path" x="50" y="3" fill="rgba(255,255,255,0.6)" /> <use
<use href="#wave-path" x="50" y="0" fill="rgba(255,255,255,0.45)" /> 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" /> <use href="#wave-path" x="50" y="9" fill="#dae5ff" />
</g> </g>
</svg> </svg>
@ -83,23 +156,49 @@
<div class="logo-section" id="bigLogo"> <div class="logo-section" id="bigLogo">
<div class="logo-box"> <div class="logo-box">
<div class="logo-title-box"> <div class="logo-title-box">
<img class="aside-img" src="../assets/left-icon.png" alt="" /> <img
class="aside-img"
src="../assets/left-icon.png"
alt=""
/>
<h1 class="logo-title">项目LOGO</h1> <h1 class="logo-title">项目LOGO</h1>
<img class="aside-img" src="../assets/right-icon.png" alt="" /> <img
class="aside-img"
src="../assets/right-icon.png"
alt=""
/>
</div> </div>
<div class="logo-icon-box"> <div class="logo-icon-box">
<img src="../assets/red-kc-logo.png" alt=""> <img src="../assets/red-kc-logo.png" alt="" />
<img src="../assets/blue-kc-logo.png" alt=""> <img src="../assets/blue-kc-logo.png" alt="" />
</div> </div>
</div> </div>
<!-- waves --> <!-- 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> <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> </defs>
<g class="parallax"> <g class="parallax">
<use href="#wave-path" x="50" y="3" fill="rgba(0,55,175,0.2)" /> <use
<use href="#wave-path" x="50" y="0" fill="rgba(0,55,175,0.2)" /> 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" /> <use href="#wave-path" x="50" y="9" fill="#180e8d" />
</g> </g>
</svg> </svg>
@ -109,14 +208,22 @@
<div class="poster-section" id="poster"> <div class="poster-section" id="poster">
<div class="poster-box"> <div class="poster-box">
<div class="poster-title-box"> <div class="poster-title-box">
<img class="aside-img" src="../assets/left-icon.png" alt="" /> <img
class="aside-img"
src="../assets/left-icon.png"
alt=""
/>
<h1 class="poster-title">宣传海报</h1> <h1 class="poster-title">宣传海报</h1>
<img class="aside-img" src="../assets/right-icon.png" alt="" /> <img
class="aside-img"
src="../assets/right-icon.png"
alt=""
/>
</div> </div>
<div class="poster-picture-box"> <div class="poster-picture-box">
<img src="../assets/poster-one.png" alt=""> <img src="../assets/poster-one.png" alt="" />
<img src="../assets/poster-two.png" alt=""> <img src="../assets/poster-two.png" alt="" />
<img src="../assets/poster-three.png" alt=""> <img src="../assets/poster-three.png" alt="" />
</div> </div>
</div> </div>
<!-- waves --> <!-- waves -->
@ -135,16 +242,37 @@
<!-- footer Section --> <!-- footer Section -->
<div class="footer-section" id="footer"> <div class="footer-section" id="footer">
<p> <p>
<span class="mail"><img src="../assets/youxiang.png" <span class="mail"
alt="">&nbsp;support@osredm.com&nbsp;&nbsp;&nbsp;&nbsp;</span> ><img
<span class="address"><img src="../assets/dituguanli.png" alt="">&nbsp;北京市海淀区西三环北路72号</span> src="../assets/youxiang.png"
alt=""
/>&nbsp;support@osredm.com&nbsp;&nbsp;&nbsp;&nbsp;</span
>
<span class="address"
><img
src="../assets/dituguanli.png"
alt=""
/>&nbsp;北京市海淀区西三环北路72号</span
>
</p> </p>
<p> <p>
<a href="https://www.osredm.com/">版权所有：红山开源社区&nbsp;&nbsp;&nbsp;&nbsp;</a> <a href="https://www.osredm.com/"
<a class="police" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802034576"> >版权所有：红山开源社区&nbsp;&nbsp;&nbsp;&nbsp;</a
<img class="police-img" src="https://forge.osredm.com/police.png" />&nbsp;京公网安备 11010802034576 号</a> >
<a class="police-number" <a
href="https://beian.miit.gov.cn/#/Integrated/index">&nbsp;&nbsp;&nbsp;&nbsp;京ICP备2021005060-1</a> class="police"
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802034576"
>
<img
class="police-img"
src="https://forge.osredm.com/police.png"
/>&nbsp;京公网安备 11010802034576 号</a
>
<a
class="police-number"
href="https://beian.miit.gov.cn/#/Integrated/index"
>&nbsp;&nbsp;&nbsp;&nbsp;京ICP备2021005060-1</a
>
</p> </p>
</div> </div>
</div> </div>
@ -156,18 +284,19 @@ export default {
methods: { methods: {
downloadVideo() { downloadVideo() {
// 创建一个a标签 // 创建一个a标签
const link = document.createElement('a'); const link = document.createElement("a");
// 设置视频的URL // 设置视频的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 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 // 设置下载属性，给下载的文件命名为kaichaung-video.mp4
link.setAttribute('download', 'kaichaung-video.mp4'); link.setAttribute("download", "kaichaung-video.mp4");
// 模拟点击a标签以开始下载 // 模拟点击a标签以开始下载
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
// 移除a标签 // 移除a标签
document.body.removeChild(link); document.body.removeChild(link);
} },
} },
}; };
</script> </script>
@ -320,23 +449,25 @@ export default {
} }
.intro-text-box { .intro-text-box {
box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0 80px;
height: 200px; height: 230px;
width: 900px; width: 900px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
background: #234DC0; background: #234dc0;
border: 2px solid #A1B4FF; border: 2px solid #a1b4ff;
p { p {
width: 100%; width: 100%;
font-size: 17px; font-size: 17px;
margin-left: 100px;
text-align: left; text-align: left;
letter-spacing: 2px; letter-spacing: 2px;
margin: 0;
line-height: 60px;
} }
} }
} }
@ -370,7 +501,7 @@ export default {
.logo-title { .logo-title {
width: 200px; width: 200px;
color: #180E8D; color: #180e8d;
} }
} }
@ -489,10 +620,8 @@ export default {
.police-img { .police-img {
border-radius: 50%; border-radius: 50%;
} }
} }
/* 波浪效果 - 起 */ /* 波浪效果 - 起 */
.waves { .waves {
@ -505,21 +634,21 @@ export default {
height: 10vh; height: 10vh;
} }
.parallax>use { .parallax > use {
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; 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-delay: -2s;
animation-duration: 7s; animation-duration: 7s;
} }
.parallax>use:nth-child(2) { .parallax > use:nth-child(2) {
animation-delay: -3s; animation-delay: -3s;
animation-duration: 10s; animation-duration: 10s;
} }
.parallax>use:nth-child(3) { .parallax > use:nth-child(3) {
animation-delay: -4s; animation-delay: -4s;
animation-duration: 13s; animation-duration: 13s;
} }
@ -580,9 +709,10 @@ export default {
li { li {
height: auto; height: auto;
color: #ffffff; color: #ffffff;
font-size: 1.2vw; font-size: 1.5vw;
font-weight: 600; font-weight: 600;
letter-spacing: 0.1vw; letter-spacing: 0.1vw;
transform: scale(0.8);
} }
} }
@ -618,7 +748,7 @@ export default {
background-color: #3466ee; background-color: #3466ee;
color: #ffffff; color: #ffffff;
font-size: 1.71vw; font-size: 1.71vw;
letter-spacing: 0.20vw; letter-spacing: 0.2vw;
line-height: 4.11vw; line-height: 4.11vw;
position: absolute; position: absolute;
bottom: 12%; bottom: 12%;
@ -627,7 +757,10 @@ export default {
border-radius: 0.68vw; border-radius: 0.68vw;
&:hover { &:hover {
background-color: darken(#3466ee, 10%); // 在原背景颜色基础上加深10% background-color: darken(
#3466ee,
10%
); // 在原背景颜色基础上加深10%
} }
} }
} }
@ -688,22 +821,23 @@ export default {
.intro-text-box { .intro-text-box {
margin: 0; margin: 0;
padding: 0; padding: 0vw 0.5vw;
height: 13.7vw; height: 16vw;
width: 61.64vw; width: 62vw;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: flex-start; align-items: flex-start;
background: #234DC0; background: #234dc0;
border: 0.14vw solid #A1B4FF; border: 0.14vw solid #a1b4ff;
p { p {
width: 61.64vw; width: 100%;
font-size: 1.16vw; font-size: 1.45vw;
margin-left: 5vw;
text-align: left; text-align: left;
letter-spacing: 0.14; transform: scale(0.8);
margin: 0;
line-height: 3.8vw;
} }
} }
} }
@ -737,7 +871,7 @@ export default {
.logo-title { .logo-title {
width: 13.7vw; width: 13.7vw;
color: #180E8D; color: #180e8d;
font-size: 2.5vw; font-size: 2.5vw;
} }
} }
@ -822,7 +956,8 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
color: #cccccc; color: #cccccc;
font-size: 0.82vw; // font-size: 0.82vw;
font-size: 1.15vw;
letter-spacing: 1px; letter-spacing: 1px;
p { p {
@ -832,9 +967,10 @@ export default {
margin: 0; margin: 0;
height: 2.05vw; height: 2.05vw;
line-height: 2.05vw; line-height: 2.05vw;
transform: scale(0.7);
img { img {
width: 1.03vw; width: 1.35vw;
} }
span { span {
@ -858,10 +994,8 @@ export default {
.police-img { .police-img {
border-radius: 50%; border-radius: 50%;
} }
} }
/* 波浪效果 - 起 */ /* 波浪效果 - 起 */
.waves { .waves {
@ -873,21 +1007,21 @@ export default {
bottom: -2vw; bottom: -2vw;
} }
.parallax>use { .parallax > use {
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite; 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-delay: -2s;
animation-duration: 7s; animation-duration: 7s;
} }
.parallax>use:nth-child(2) { .parallax > use:nth-child(2) {
animation-delay: -3s; animation-delay: -3s;
animation-duration: 10s; animation-duration: 10s;
} }
.parallax>use:nth-child(3) { .parallax > use:nth-child(3) {
animation-delay: -4s; animation-delay: -4s;
animation-duration: 13s; animation-duration: 13s;
} }