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

优化项目，修改响应式

master
liaoxinyu 1 year ago
parent
95b3d48ef0
commit
59cdd2bcc4
6 changed files with 245 additions and 49 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. 17
      src/components/CommonFooter.vue
  3. 62
      src/components/CommonHeader.vue
  4. 2
      src/index.html
  5. 210
      src/views/home/index.vue
  6. 1
      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>

17
src/components/CommonFooter.vue
View File

@ -612,4 +612,21 @@ 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>

62
src/components/CommonHeader.vue
View File

@ -8,13 +8,20 @@
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>
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#headerMenu"
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 +121,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,11 +216,11 @@
<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>
@ -222,6 +229,7 @@
<!-- <a href="http://b.qiyeim.com:98/kefu.html?username=admin">
<img class="kefu" src="../assets/img/logo-light.png" alt="">
</a> -->
</nav>
</header>
</template>
@ -464,7 +472,8 @@ export default {
],
},
userInfo: {},
detail: {}
detail: {},
isToggled: false
};
},
@ -591,6 +600,9 @@ export default {
})
.catch((res) => {});
},
toggleAnimation() {
this.isToggled = !this.isToggled;
}
},
created() {
@ -755,4 +767,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>

2
src/index.html
View File

@ -53,7 +53,7 @@
</head>
<style>
body{
min-width: 1200px;
/* min-width: 1200px; */
}
</style>
<body>

210
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: 452px;width: 607px;">
<img src="@/assets/img/home/home1.png">
</div>
</div>
</div>
@ -389,7 +389,7 @@
<!-- 探索无限可能 -->
<div class="title1" style="margin-top: 150px;margin-bottom: 100px;">{{ $t("homeNewText.bb8",{name:'Vgncoin'}) }}</div>
<div class="travel_area" style="width: 1300px;">
<div class="travel_area">
<div class="travel_box">
<div class="travel_img" style="width: 260px;"><img src="@/assets/img/home/home2.png" width="260" class="travel_img1" /></div>
<div style="padding: 0px 40px;">
@ -415,7 +415,7 @@
<div class="title1" style="margin-top: 200px;margin-bottom: 50px;">{{ $t("homeNewText.bb15") }}</div>
<div class="learn_area">
<div>
<div class="learn_box">
<div style="color: #547AF7;font-size: 36px;text-align: center;">STEP 1</div>
<div style="font-size: 24px;text-align: center;margin-top: 20px;">{{ $t("homeNewText.bb16",{name:'Vgncoin'}) }}</div>
<div style="font-size: 16px;text-align: center;margin-top: 20px;">{{ $t("homeNewText.bb17") }}</div>
@ -424,12 +424,12 @@
<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="STEP_img">
<img src="@/assets/img/home/home5.png" >
<img src="@/assets/img/home/home6.png" width="140">
<img src="@/assets/img/home/home5.png" >
</div>
<div>
<div class="learn_box">
<div style="color: #547AF7;font-size: 36px;text-align: center;">STEP 2</div>
<div style="font-size: 24px;text-align: center;margin-top: 20px;">{{ $t("homeNewText.bb18") }}</div>
<div style="font-size: 16px;text-align: center;margin-top: 20px;">{{ $t("homeNewText.bb19") }}</div>
@ -438,12 +438,12 @@
<router-link v-else class="jump_btn1" :to="{name:'exchange-assets'}">{{ $t("homeNewText.bb20") }}</router-link>
</div>
</div>
<div style="padding-top: 15px;width: 237px;text-align: center;">
<div class="STEP_img">
<img src="@/assets/img/home/home5.png" >
<img src="@/assets/img/home/home6.png" width="140">
<img src="@/assets/img/home/home5.png" >
</div>
<div>
<div class="learn_box">
<div style="color: #547AF7;font-size: 36px;text-align: center;">STEP 3</div>
<div style="font-size: 24px;text-align: center;margin-top: 20px;">{{ $t("homeNewText.bb21") }}</div>
<div style="font-size: 16px;text-align: center;margin-top: 20px;">{{ $t("homeNewText.bb22") }}</div>
@ -455,39 +455,45 @@
</div>
<!-- 轻松玩赚数字货币 -->
<div style="width: 100%;background-color: #0B0FCC;margin-top: 200px;height: 700px;">
<div class="positionBox d-flex" style="align-items: center;justify-content: space-between;height: 700px;">
<div style="width: 480px;">
<div style="width: 100%;background-color: #0B0FCC;margin-top: 200px;padding: 100px 20px;">
<div class="positionBox d-flex" style="align-items: center;justify-content: space-between;">
<div class="positionBox_box1">
<div style="font-size: 48px;">{{ $t("homeNewText.bb24") }}</div>
<div style="color: #fff;margin-bottom: 30px;font-size: 16px;">{{ $t("homeNewText.bb25") }}</div>
<div style="color: #fff;">{{ $t("homeNewText.bb26") }}</div>
<div style="margin-top: 40px;">
<div class="d-flex">
<a style="width: 90px;text-decoration: none;text-align: center;">
<div style="margin-right: 20px;">
<img src="@/assets/img/home/apple_1.png" style="width: 30px;height: 30px;">
<div>App Store</div>
<div class="positionBox_box4">
<div>
<div style="color: #fff;margin-bottom: 30px;font-size: 16px;">{{ $t("homeNewText.bb25") }}</div>
<div style="color: #fff;">{{ $t("homeNewText.bb26") }}</div>
<div style="margin-top: 40px;">
<div class="d-flex">
<a style="width: 90px;text-decoration: none;text-align: center;">
<div style="margin-right: 20px;">
<img src="@/assets/img/home/apple_1.png" style="width: 30px;height: 30px;">
<div>App Store</div>
</div>
</a>
<a style="width: 60px;text-decoration: none;text-align: center;">
<div style="margin-right: 0px;">
<img src="@/assets/img/home/android_1.png" style="width: 30px;height: 30px;">
<div>Android</div>
</div>
</a>
<!-- <a style="width: 180px;text-decoration: none;">
<div style="margin-right: 40px;display: flex;align-items: center;">
<img src="" style="width: 30px;height: 30px;">
<div></div>
</div>
</a> -->
</div>
</a>
<a style="width: 60px;text-decoration: none;text-align: center;">
<div style="margin-right: 0px;">
<img src="@/assets/img/home/android_1.png" style="width: 30px;height: 30px;">
<div>Android</div>
</div>
</a>
<!-- <a style="width: 180px;text-decoration: none;">
<div style="margin-right: 40px;display: flex;align-items: center;">
<img src="" style="width: 30px;height: 30px;">
<div></div>
</div>
</a> -->
</div>
</div>
</div>
<div class="trade_box">
<div class="trade_img"><img src="" style="border-radius: 10px;" alt=""></div>
<div style="margin-left: 15px;">
<div style="font-weight: bold;font-size: 20px;">{{ $t("homeNewText.bb33") }}</div>
<div style="font-weight: bold;">iOS & Android</div>
<div>
<div class="trade_box">
<div class="trade_img"><img src="" style="border-radius: 10px;" alt=""></div>
<div style="margin-left: 15px;">
<div style="font-weight: bold;font-size: 20px;">{{ $t("homeNewText.bb33") }}</div>
<div style="font-weight: bold;">iOS & Android</div>
</div>
</div>
</div>
</div>
</div>
@ -1021,6 +1027,7 @@
.illustration_area{
width: 1300px;
margin: 0px auto 0px;
padding: 100px 0px;
display: flex;
justify-content: space-between;
align-items: center;
@ -2083,6 +2090,12 @@
margin: 0px auto 0px;
display: flex;
justify-content: space-between;
.STEP_img{
width: 237px;
padding-top: 15px;
text-align: center;
}
}
.circle_bg{
width: 50px;
@ -2113,6 +2126,10 @@
}
}
.positionBox_box1{
width: 480px;
}
.positionBox_box2{
width: 640px;
height: 500px;
@ -2248,4 +2265,121 @@
transform: translateZ(-300px);
}
}
@media (max-width:1200px){
.illustration_area{
width: 100%;
.left{
max-width: 500px;
.title{
font-size: 45px;
}
}
.right{
width: 500px;
height: 350px;
.right_box{
bottom: 10px;
}
}
}
.market_table{
width: 100%;
padding: 0px 20px;
}
.title1{
width: 100%;
padding: 0px 20px;
text-align: center;
}
.travel_area{
width: 100%;
flex-wrap: wrap;
.travel_box{
width: 400px;
}
}
.learn_area{
width: 100%;
flex-wrap: wrap;
padding: 0px 20px;
.STEP_img{
display: none;
}
}
.positionBox{
width: 100%;
}
.starrysky_box{
width: 100%;
}
}
@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: 350px;
position: absolute;
top: 70px;
left: 50%;
transform: translateX(-50%);
.right_box{
bottom: 10px;
}
}
}
.travel_area{
justify-content: center;
.travel_box{
width: 100%;
}
}
.learn_box{
width: 100%;
margin-top: 15px;
}
.positionBox .positionBox_box1{
width: 100%;
}
.positionBox_box2{
display: none;
}
.positionBox_box4{
display: flex;
justify-content: space-between;
}
.starrysky_box{
width: 100%;
}
}
</style>

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

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

Write Preview
Loading…
Cancel
Save