|
@@ -120,7 +120,7 @@
|
|
|
<div id="ani2" class="ani2">
|
|
|
<div class="time-top">
|
|
|
<span>北京时间</span>
|
|
|
- <span>首尔时间 </span>
|
|
|
+ <span>首尔时间</span>
|
|
|
</div>
|
|
|
<div class="time-box">
|
|
|
<span>{{ nowTime }}</span>
|
|
@@ -129,10 +129,8 @@
|
|
|
</div>
|
|
|
<div class="time-line"></div>
|
|
|
<div class="time-bottom">
|
|
|
- <div class="time-left">
|
|
|
- <img src="/sk/skImage/time-icon.svg" alt="" />
|
|
|
- <span>{{ nowDate }}</span>
|
|
|
- </div>
|
|
|
+ <img src="/sk/skImage/time-icon.svg" alt="" />
|
|
|
+ <span>{{ nowDate }}</span>
|
|
|
<div class="time-right">
|
|
|
<span>{{ week }}</span>
|
|
|
</div>
|
|
@@ -326,7 +324,7 @@ export default defineComponent({
|
|
|
updateStyle() {
|
|
|
let ani1 = document.getElementById("ani1");
|
|
|
let ani2 = document.getElementById("ani2");
|
|
|
- ani2.style.top = ani1.offsetHeight + "px";
|
|
|
+ ani2.style.top = ani1.offsetHeight - ani1.offsetHeight * 0.014 + "px";
|
|
|
let line = document.getElementById("line");
|
|
|
let text = document.getElementById("text");
|
|
|
line.style.height = logoLeft.offsetHeight + "px";
|
|
@@ -442,7 +440,7 @@ export default defineComponent({
|
|
|
opacity: 0;
|
|
|
position: absolute;
|
|
|
top: 20vh;
|
|
|
- left: 54vw;
|
|
|
+ left: 52vw;
|
|
|
height: 41vh;
|
|
|
width: 4px;
|
|
|
background-color: #ccc;
|
|
@@ -532,70 +530,70 @@ export default defineComponent({
|
|
|
|
|
|
.ani2 {
|
|
|
opacity: 0;
|
|
|
- // top: 725px;
|
|
|
- // left: 200px;
|
|
|
- width: 25%;
|
|
|
- // top: 70%;
|
|
|
+ font-size: 0;
|
|
|
left: 10.4vw;
|
|
|
position: absolute;
|
|
|
.time-top {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
- font-size: 30px;
|
|
|
- color: #6b6b6b;
|
|
|
+ font-size: 34px;
|
|
|
+ color: #7e7e82;
|
|
|
+ &:nth-child(1) {
|
|
|
+ padding-left: 10px;
|
|
|
+ margin-right: 8.2vw;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.time-line {
|
|
|
margin: 0 auto;
|
|
|
- margin-top: 20px;
|
|
|
- width: 98%;
|
|
|
+ margin-top: 0.7vh;
|
|
|
+ margin-bottom: 0.7vh;
|
|
|
+ // width: 440px;
|
|
|
+ width: 95%;
|
|
|
height: 1px;
|
|
|
- background: #c1c1c3;
|
|
|
+ background: #cacaca;
|
|
|
}
|
|
|
.time-bottom {
|
|
|
- width: 100%;
|
|
|
- margin: 0 auto;
|
|
|
- padding: 10px 0;
|
|
|
- font-size: 20px;
|
|
|
- color: #7e7e80;
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- .time-left {
|
|
|
- text-align: left;
|
|
|
- flex: 1;
|
|
|
- img {
|
|
|
- width: 25px;
|
|
|
- height: 25px;
|
|
|
- vertical-align: middle;
|
|
|
- }
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- vertical-align: middle;
|
|
|
- padding-left: 10px;
|
|
|
- }
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ font-size: 34px;
|
|
|
+ padding-left: 10px;
|
|
|
+ color: #7e7e82;
|
|
|
+ img {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 34px;
|
|
|
+ height: 34px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ vertical-align: middle;
|
|
|
+ font-size: 34px;
|
|
|
+ padding-left: 15px;
|
|
|
}
|
|
|
.time-right {
|
|
|
- text-align: right;
|
|
|
- width: 100px;
|
|
|
+ display: inline-block;
|
|
|
+ margin-top: -2px;
|
|
|
+ vertical-align: middle;
|
|
|
+ font-size: 34px;
|
|
|
+ padding-left: 20px;
|
|
|
}
|
|
|
}
|
|
|
.time-box {
|
|
|
- padding-top: 20px;
|
|
|
- font-size: 60px;
|
|
|
- display: flex;
|
|
|
- // color: #01b59a;
|
|
|
- color: #ff6f22;
|
|
|
- justify-content: space-between;
|
|
|
+ padding-top: 0.1vh;
|
|
|
+ font-size: 70px;
|
|
|
+ font-family: "HarmonyOS Sans TC";
|
|
|
+ color: #ff7a00;
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
vertical-align: middle;
|
|
|
&:nth-child(2) {
|
|
|
- margin-top: 30px;
|
|
|
- height: 20px;
|
|
|
- border: 1px solid #c1c1c3;
|
|
|
- // background: #6b6b6b;
|
|
|
+ margin-left: 52px;
|
|
|
+ margin-right: 52px;
|
|
|
+ height: 45px;
|
|
|
+ border-left: 1px solid #cacaca;
|
|
|
}
|
|
|
}
|
|
|
}
|