Browse Source

修改图片、文字调换轮播位置

master
liaoxinyu 1 year ago
parent
commit
79a15be18e
  1. BIN
      src/assets/img/home/home1.png
  2. BIN
      src/assets/img/home/home1_1.png
  3. 72
      src/views/home/index.vue
  4. 4
      src/views/signIn/index.vue

BIN
src/assets/img/home/home1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 102 KiB

BIN
src/assets/img/home/home1_1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

72
src/views/home/index.vue

@ -52,8 +52,8 @@
<!-- 加密货币之门 --> <!-- 加密货币之门 -->
<div class="illustration_area" style="background-color: transparent;"> <div class="illustration_area" style="background-color: transparent;">
<div class="left"> <div class="left">
<div class="title">{{ $t("homeNewText.hh0") }}</div> <div class="title">{{ $t("homeNewText.aa1") }}</div>
<div style="font-size: 17px;">{{ $t("homeNewText.hh1") }}</div> <div style="font-size: 17px;">{{ $t("homeNewText.aa2") }}</div>
<router-link v-if="!isLogin" class="jump_btn" :to="{name:'signUp'}"> <router-link v-if="!isLogin" class="jump_btn" :to="{name:'signUp'}">
{{ $t("homeNewText.hh2") }} {{ $t("homeNewText.hh2") }}
@ -64,29 +64,26 @@
</div> </div>
<div class="right" style="overflow: visible;"> <div class="right" style="overflow: visible;">
<div class="right_box"> <div class="right_box">
<img src="@/assets/img/home/home1.png"> <img src="@/assets/img/home/home1.png" width="400">
</div> </div>
</div> </div>
</div> </div>
<div class="marquee" v-if="marketList[0]" style="margin-top: 0px;"> <div class="marquee" style="margin-top: 0px;">
<div class="marquee-pargress d-flex"> <div class="marquee-pargress d-flex">
<ul class="marquee-list d-flex" v-for="box in 3" :key="box+'box'" style="background-color: #E4B54E !important;"> <ul class="marquee-list d-flex" v-for="box in 4" :key="box+'box'" style="background-color: #f5f5f5;">
<li class="item" v-for="(item,index) in marketList[0].marketInfoList" :key="index + '' + box"> <li class="item" style="margin: 0px;"><img src="@/assets/img/home/img1.png"></li>
<!-- <li class="item" v-for="item in marketList[0].marketInfoList" :key="item.coin_name + '' + box"> --> <li class="item" style="margin: 0px;"><img src="@/assets/img/home/img2.png"></li>
<div class="price-info d-flex"> <li class="item" style="margin: 0px;"><img src="@/assets/img/home/img3.png"></li>
<div class="symbol" style="margin-right: 5px;font-weight: bold;"> <li class="item" style="margin: 0px;"><img src="@/assets/img/home/img4.png"></li>
<!-- {{ item.pair }} --> <li class="item" style="margin: 0px;"><img src="@/assets/img/home/img5.png"></li>
{{ item.pair_name }} <li class="item" style="margin: 0px;"><img src="@/assets/img/home/img6.png"></li>
</div> <li class="item" style="margin: 0px;"><img src="@/assets/img/home/img7.png"></li>
<div class="d-flex"> <li class="item" style="margin: 0px;"><img src="@/assets/img/home/img8.png"></li>
<!-- <span>${{ item.price||item.close }}</span> --> <li class="item" style="margin: 0px;"><img src="@/assets/img/home/img9.png"></li>
<span style="font-weight: bold;"> <li class="item" style="margin: 0px;"><img src="@/assets/img/home/img10.png"></li>
({{ item.increaseStr }}) <li class="item" style="margin: 0px;"><img src="@/assets/img/home/img11.png"></li>
</span> <li class="item" style="margin: 0px;"><img src="@/assets/img/home/img12.png"></li>
</div>
</div>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -255,21 +252,24 @@
</div> </div>
</div> </div>
<div class="marquee" style="margin-top: 0px;"> <div class="marquee" v-if="marketList[0]" style="margin-top: 0px;">
<div class="marquee-pargress d-flex"> <div class="marquee-pargress d-flex">
<ul class="marquee-list d-flex" v-for="box in 4" :key="box+'box'" style="background-color: #fff;"> <ul class="marquee-list d-flex" v-for="box in 3" :key="box+'box'" style="background-color: #E4B54E !important;">
<li class="item" style="margin: 0px;"><img src="@/assets/img/home/img1.png"></li> <li class="item" v-for="(item,index) in marketList[0].marketInfoList" :key="index + '' + box">
<li class="item" style="margin: 0px;"><img src="@/assets/img/home/img2.png"></li> <!-- <li class="item" v-for="item in marketList[0].marketInfoList" :key="item.coin_name + '' + box"> -->
<li class="item" style="margin: 0px;"><img src="@/assets/img/home/img3.png"></li> <div class="price-info d-flex">
<li class="item" style="margin: 0px;"><img src="@/assets/img/home/img4.png"></li> <div class="symbol" style="margin-right: 5px;font-weight: bold;">
<li class="item" style="margin: 0px;"><img src="@/assets/img/home/img5.png"></li> <!-- {{ item.pair }} -->
<li class="item" style="margin: 0px;"><img src="@/assets/img/home/img6.png"></li> {{ item.pair_name }}
<li class="item" style="margin: 0px;"><img src="@/assets/img/home/img7.png"></li> </div>
<li class="item" style="margin: 0px;"><img src="@/assets/img/home/img8.png"></li> <div class="d-flex">
<li class="item" style="margin: 0px;"><img src="@/assets/img/home/img9.png"></li> <!-- <span>${{ item.price||item.close }}</span> -->
<li class="item" style="margin: 0px;"><img src="@/assets/img/home/img10.png"></li> <span style="font-weight: bold;">
<li class="item" style="margin: 0px;"><img src="@/assets/img/home/img11.png"></li> ({{ item.increaseStr }})
<li class="item" style="margin: 0px;"><img src="@/assets/img/home/img12.png"></li> </span>
</div>
</div>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -2077,9 +2077,13 @@
width: 500px; width: 500px;
height: 400px; height: 400px;
position: relative; position: relative;
} }
.right_box{ .right_box{
width: 500px;
height: 400px;
position: absolute; position: absolute;
text-align: center;
bottom: 0px; bottom: 0px;
animation: movepoint 1.3s ease-in-out infinite alternate; animation: movepoint 1.3s ease-in-out infinite alternate;
} }

4
src/views/signIn/index.vue

@ -5,14 +5,14 @@
<div style="width: 242px;height: 242px;background-color: #fff;line-height: 242px;text-align: center;border-radius: 10px;box-shadow: 0px 0px 6px 0px rgba(82, 72, 208, 0.25);"> <div style="width: 242px;height: 242px;background-color: #fff;line-height: 242px;text-align: center;border-radius: 10px;box-shadow: 0px 0px 6px 0px rgba(82, 72, 208, 0.25);">
<img src="@/assets/img/home/tro.png" style="width: 205px;height: 205px;" /> <img src="@/assets/img/home/tro.png" style="width: 205px;height: 205px;" />
</div> </div>
<div style="font-size: 16px; color: #9C9C9C;margin-top: 12px;text-align: center;">{{ $t("homeNewText.hh46",{name:"Trocoin"}) }}</div> <div style="font-size: 16px; color: #9C9C9C;margin-top: 12px;text-align: center;">{{ $t("homeNewText.hh46",{name:"Trowallets"}) }}</div>
</div> </div>
</div> </div>
<div class="sign_right" style="width: 53%;background-color: #fff;"> <div class="sign_right" style="width: 53%;background-color: #fff;">
<div class="form-access"> <div class="form-access">
<form class="login-body"> <form class="login-body">
<div class="mb-4 h3" style="font-size: 40px;color: #101010;"> <div class="mb-4 h3" style="font-size: 40px;color: #101010;">
<span>{{ $t("login.a1",{name:'Trocoin'}) }}</span> <span>{{ $t("login.a1",{name:'Trowallets'}) }}</span>
</div> </div>
<template v-if="step === 1 "> <template v-if="step === 1 ">

Loading…
Cancel
Save