liaoxinyu
/
Mhbcoin_PC
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

项目优化，修改响应式问题

master
liaoxinyu 2 years ago
parent
656078e691
commit
2f80804c1c
6 changed files with 270 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/App.vue
  2. 16
      src/components/CommonFooter.vue
  3. 70
      src/components/CommonHeader.vue
  4. 4
      src/index.html
  5. 212
      src/views/home/index.vue
  6. 3
      static/css/bootstrap.min.css

2
src/App.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div style="overflow-x:hidden">
<common-header :class="{'home-bg' : isHome}"></common-header>
<main>
<router-view></router-view>

16
src/components/CommonFooter.vue
View File

@ -612,4 +612,20 @@ export default {
}
}
}
@media (max-width:1200px){
.content{
width: 100% !important;
padding: 0px 50px;
}
}
@media (max-width:835px){
.footer .footer-upper-section{
width: 100%;
}
.footer .footer-right{
display: none;
}
}
</style>

70
src/components/CommonHeader.vue
View File

@ -1,20 +1,26 @@
<template>
<header id="common-header" :class="[`light-bb`, hook]">
<nav class="navbar navbar-expand-lg" style="background-color: #121212;">
<a class="navbar-brand" href="#/">
<img :src="appConfig.head_logo" alt="logo"/>
<!-- <img src="../assets/img/logo.png" alt="logo" style="width:102px;height:30px"/> -->
<!-- <span class="logo-text">
AMATAK
</span>-->
<header id="common-header" :class="[`light-bb`, hook]">
<nav class="navbar navbar-expand-lg" style="background-color: #121212;">
<a class="navbar-brand" href="#/">
<img :src="appConfig.head_logo" alt="logo"/>
<!-- <img src="../assets/img/logo.png" alt="logo" style="width:102px;height:30px"/> -->
<!-- <span class="logo-text">
AMATAK
</span>-->
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#headerMenu"
aria-controls="headerMenu" aria-expanded="false" aria-label="Toggle navigation">
<i class="icon ion-md-menu"></i>
aria-controls="headerMenu" aria-expanded="false" aria-label="Toggle navigation" @click="toggleAnimation">
<!-- <i class="icon ion-md-menu" style="color: #fff;"></i> -->
<div class="hamburger-menu" :class="{ active: isToggled }">
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</div>
</button>
<div class="collapse navbar-collapse" id="headerMenu" >
<ul class="navbar-nav mr-auto nav-bar" >
<!-- mr-auto -->
<ul class="navbar-nav nav-bar" >
<li class="nav-item" >
<router-link class="nav-link" :to='home.url'>{{ home.label }}</router-link>
@ -114,7 +120,7 @@
{{ nativeLang }}</a>
<!-- <img src="../assets/img/hg.jpg" class="nav_img" style="max-width: 10%;"></img> -->
<!-- </div> -->
<div class="dropdown-menu">
<div class="dropdown-menu" style="left: 0;">
<div class="dropdown-item" @click.prevent="chooseNative(item.value)"
v-for="(item, index) in langList" :key="index">
<div class="nav-item_icon">
@ -209,10 +215,10 @@
<template v-else>
<li class="nav-item dropdown no-login" style="width:auto">
<router-link to="/sign-in" class="btn btn-sm rounded-pill" href="#" tag="div"
role="button" style="margin:0 15px;color:#fff;">{{ $t('common.sign_in') }}
role="button" style="color:#fff;">{{ $t('common.sign_in') }}
</router-link>
<router-link to="/sign-up" class="btn btn-sm rounded-pill" href="#"
tag="div" role="button" style="color:#fff;border: 1px solid #fff;border-radius: 50px !important;">{{ $t('common.sign_up') }}
tag="div" role="button" style="color:#fff;border: 1px solid #fff;border-radius: 50px !important;margin-left:15px;">{{ $t('common.sign_up') }}
</router-link>
</li>
</template>
@ -463,6 +469,7 @@ export default {
],
},
userInfo: {},
isToggled: false
};
},
@ -585,6 +592,9 @@ export default {
})
.catch((res) => {});
},
toggleAnimation() {
this.isToggled = !this.isToggled;
}
},
created() {
@ -749,4 +759,36 @@ color: #fff !important;
.dropdown-menu.download::before{
content: none;
}
.hamburger-menu {
width: 20px;
height: 20px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.line {
width: 100%;
height: 3px;
background-color: #fff;
transition: all 0.8s;
}
.active .line-1 {
transform: rotateZ(-405deg) translate(-4px, 6px);
}
.active .line-3 {
transform: rotateZ(405deg) translate(-4px, -6px);
}
.active .line-2 {
opacity: 0;
}
button {
outline: none;
}
</style>

4
src/index.html
View File

@ -52,9 +52,9 @@
<script src="./static/libs/swiper-5.3.8/package/js/swiper.min.js"></script>
</head>
<style>
body{
/* body{
min-width: 1200px;
}
} */
</style>
<body>

212
src/views/home/index.vue
View File

@ -329,7 +329,7 @@
<!--中间显示4个图标-->
</div>
<!-- 立即体验 -->
<div class="section illustration_area">
<div class="illustration_area">
<div class="left">
<div class="title">{{ $t("homeNewText.bb4") }}</div>
<div class="title" style="font-size: 18px;margin-top: 30px;">{{ $t("homeNewText.bb5") }}</div>
@ -342,7 +342,7 @@
</div>
<div class="right" style="overflow: visible;">
<div class="right_box">
<img src="@/assets/img/home/home1.png" alt="" style="height: 480px;width: auto;">
<img src="@/assets/img/home/home1.png" alt="">
</div>
</div>
</div>
@ -370,15 +370,15 @@
</div>
<!-- 全球领先数字货币交易所 -->
<div class="title" style="font-size: 48px;text-align: center;margin-bottom: 10px;">{{ $t("homeNewText.bb7") }}</div>
<div class="productservice">
<div class="title" style="font-size: 48px;text-align: center;margin-bottom: 10px;">{{ $t("homeNewText.bb7") }}</div>
<div style="font-size: 20px;color: #fff;text-align: center;">{{ $t("homeNewText.bb8") }}</div>
<div style="font-size: 20px;color: #fff;text-align: center;">{{ $t("homeNewText.bb8") }}</div>
<div class="scrollBox_box3" ref="scrollBox">
<img id="scrollimg" src="@/assets/img/home/home2.png" :style="imageStyle">
</div>
</div>
<!-- 探索无限可能 -->
<!-- 資產安全 -->
<div class="title" style="text-align:center;margin-top: 150px;font-size: 48px;">{{ $t("homeNewText.bb9") }}</div>
<div class="travel_area" style="margin-top: 50px;">
<router-link :to="{name:'exchange'}" style="color: #fff;margin-bottom: 20px;">
@ -434,22 +434,22 @@
<div class="productservice">
<div class="title" style="text-align: center;margin-bottom: 50px;margin-top: 150px;font-size: 48px;">{{ $t("homeNewText.bb18") }}</div>
<div class="productservice_box">
<div>
<div class="learn_area_box">
<div class="productservice_img"><img src="@/assets/img/home/home7.png"></div>
<div class="productservice_box1">{{ $t("homeNewText.bb19") }}</div>
<div class="productservice_box2" style="width: 257px;">{{ $t("homeNewText.bb20") }}</div>
</div>
<div>
<div class="learn_area_box">
<div class="productservice_img"><img src="@/assets/img/home/home8.png"></div>
<div class="productservice_box1">{{ $t("homeNewText.bb21") }}</div>
<div class="productservice_box2" style="width: 295px;">{{ $t("homeNewText.bb22") }}</div>
</div>
<div>
<div class="learn_area_box">
<div class="productservice_img"><img src="@/assets/img/home/home9.png"></div>
<div class="productservice_box1">{{ $t("homeNewText.bb23") }}</div>
<div class="productservice_box2" style="width: 241px;">{{ $t("homeNewText.bb24") }}</div>
</div>
<div>
<div class="learn_area_box">
<div class="productservice_img"><img src="@/assets/img/home/home10.png"></div>
<div class="productservice_box1">{{ $t("homeNewText.bb25") }}</div>
<div class="productservice_box2" style="width: 225px;">{{ $t("homeNewText.bb26") }}</div>
@ -460,7 +460,7 @@
<!-- <div class="travel_img" style="width: 260px;height: 280px;"><img src="@/assets/img/home/home2.png" width="260" class="travel_img1" /></div> -->
<div class="title" style="margin-top: 150px;text-align: center;margin-bottom: 50px;font-size: 48px;">{{ $t("homeNewText.bb27") }}</div>
<div class="learn_area">
<div>
<div class="learn_area_box">
<div class="learn_area1">
<div class="learn_area_text1">1</div>
</div>
@ -471,10 +471,10 @@
<router-link v-else class="jump_btn1" :to="{name:'exchange-assets'}">{{ $t("homeNewText.bb6") }}</router-link>
</div>
</div>
<div style="padding-top: 15px;width: 237px;text-align: center;">
<div class="learn_area_img">
<img src="@/assets/img/home/home12.png" width="140">
</div>
<div>
<div class="learn_area_box">
<div class="learn_area1">
<div class="learn_area_text1">2</div>
</div>
@ -485,10 +485,10 @@
<router-link v-else class="jump_btn1" :to="{name:'exchange-assets'}">{{ $t("homeNewText.bb32") }}</router-link>
</div>
</div>
<div style="padding-top: 15px;width: 237px;text-align: center;">
<div class="learn_area_img">
<img src="@/assets/img/home/home12.png" width="140">
</div>
<div>
<div class="learn_area_box">
<div class="learn_area1">
<div class="learn_area_text1">3</div>
</div>
@ -509,7 +509,7 @@
<img src="@/assets/img/home/home13.png">
</div>
</div>
<div style="width: 480px;">
<div class="positionBox_box4">
<div class="trade_box">
<div class="trade_img"><img src="" style="border-radius: 10px;" alt=""></div>
<div style="margin-left: 15px;">
@ -544,9 +544,9 @@
<!-- 立即開始您的加密之旅 -->
<div style="width: 100%;background-color: #131419;padding: 100px 0px;">
<div class="positionBox">
<div style="display: flex;justify-content: space-between;align-items: center;">
<div class="positionBox_box1">
<div><img src="@/assets/img/home/home14.png"></div>
<div>
<div class="positionBox_title">
<div class="title" style="font-size: 48px;">{{ $t("homeNewText.bb37") }}</div>
<div style="display: flex;justify-content: center;">
<router-link v-if="!isLogin" class="jump_btn4" :to="{name:'signUp'}">{{ $t("homeNewText.bb38") }}</router-link>
@ -1102,6 +1102,7 @@
.illustration_area{
width: 1300px;
margin: 0px auto 0px;
padding: 120px 0px;
display: flex;
justify-content: space-between;
align-items: center;
@ -1113,12 +1114,12 @@
}
.right{
width: 590px;
height: 660px;
height: 400px;
position: relative;
}
.right_box{
position: absolute;
bottom: 60px;
bottom: 100px;
animation: movepoint 1.3s ease-in-out infinite alternate;
}
@ -2137,6 +2138,12 @@
background-repeat: no-repeat;
}
}
.learn_area_img{
width: 237px;
padding-top: 15px;
text-align: center;
}
}
.circle_bg{
width: 50px;
@ -2181,6 +2188,16 @@
to {transform:translate(0,20px)}/* 下浮高度 */
}
}
.positionBox_box4{
width: 480px;
}
.positionBox_box1{
display: flex;
align-items: center;
justify-content: space-between;
}
}
.jump_btn3{
display: inline-block;
@ -2266,4 +2283,161 @@
}
}
}
@media (max-width:1200px){
.illustration_area{
width: 100%;
.left{
max-width: 500px;
.title{
font-size: 45px;
}
}
.right{
width: 500px;
height: 400px;
}
}
.title{
width: 100%;
padding: 0px 20px;
text-align: center;
}
.travel_area{
width: 100%;
flex-wrap: wrap;
padding: 0px 20px;
.travel_box{
width: 100%;
}
}
.productservice{
width: 100%;
.scrollBox_box3{
width: 100%;
}
}
.productservice_box{
width: 100%;
padding: 0px 20px;
flex-wrap: wrap;
}
.learn_area{
width: 100%;
padding: 0px 20px;
}
.positionBox{
width: 100%;
padding: 0px 20px;
.positionBox_box2 .positionBox_box3{
bottom: 100px;
}
}
}
@media (max-width:800px){
.illustration_area{
width: 100%;
display: block;
position: relative;
.left{
max-width: 800px;
margin-top: 300px;
text-align: center;
.title{
font-size: 45px;
}
}
.right{
width: 500px;
height: 400px;
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%);
.right_box{
bottom: 10px;
}
}
}
.travel_area{
justify-content: center;
.travel_box{
width: 100%;
}
}
.productservice_box{
width: 100%;
}
.learn_area{
width: 100%;
flex-wrap: wrap;
.learn_area_img{
display: none;
}
}
.learn_area_box{
width: 100%;
margin-top: 20px;
.productservice_box2{
width: 100% !important;
}
}
.positionBox{
width: 100%;
padding: 0px 20px;
position: relative;
.positionBox_box2{
width: 100%;
position: absolute;
top: 0px;
.positionBox_box3{
width: 100%;
}
}
.positionBox_box4{
width: 100%;
margin-top: 500px;
margin-bottom: 20px;
}
.positionBox_box1{
flex-wrap: wrap;
justify-content: center;
.positionBox_title{
margin-top: 40px;
}
}
}
}
@media (max-width:507px){
.productservice_box{
width: 100%;
justify-content: center !important;
}
}
</style>

3
static/css/bootstrap.min.css
View File

@ -4791,7 +4791,8 @@ input[type=submit].btn-block {
display: -ms-flexbox!important;
display: flex!important;
-ms-flex-preferred-size: auto;
flex-basis: auto
flex-basis: auto;
justify-content: space-between;
}
.navbar-expand-lg .navbar-toggler {
display: none

Write Preview
Loading…
Cancel
Save