代码拉取完成，页面将自动刷新
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282
<!DOCTYPE html>
<html>
<head>
<!--Copyright (C) <2021> <name of author：LUO YI YANG>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.-->
<meta charset="utf-8" />
<title>25罗UI设计</title>
<link rel="stylesheet" href="https://www.iconfont.cn/collections/detail?cid=40108">
<script src="./vue.js" type="text/javascript" charset="UTF-8"></script>
<script src="./vue.min.js" type="text/javascript" charset="UTF-8"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
</head>
<style>
@font-face {font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
*{
margin: 0;
transition: 2s;
list-style: none;
}
.container{
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.banner{
position: absolute;
width: 300px;
height: 600px;
border: 4px solid;
box-shadow: 20px 10px 30px black,
inset 0 -30px 15px rgba(255, 255, 255, 0.5),
;
border-radius: 34px;
display: flex;
align-items: center;
-webkit-box-reflect: below 2px linear-gradient(transparent,#0009);
}
.banner::before{
content: '';
position: absolute;
top: 0;
width: 300px;
height: 50px;
background-color: black;
border-top-left-radius: 28px;
border-top-right-radius: 28px;
}
.banner::after{
content: '';
position: absolute;
width: 300px;
height: 50px;
background-color: black;
border-top-left-radius: 28px;
border-top-right-radius: 28px;
transform: rotateX(-180deg);
bottom: 0;
}
#index button{
position: absolute;
width: 40px;
height: 40px;
border-radius: 40px;
z-index: 1;
bottom: 0;
left: calc(50% - 20px);
cursor: pointer;
}
#index{
width: 300px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
}
.time{
width: 100%;
height: 100%;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
font-weight: 1000;
color: white;
}
#hour{
margin: 5px;
color: white;
}
#minute{
margin: 5px;
color: white;
}
img{
background-position: center;
background-size: cover;
width: 300px;
height: 530px;
}
.flex{
width: 100%;
height: 90%;
z-index: 4;
position: absolute;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.flex i{
margin-top: 30px;
margin: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(255,255,255,0.8);
width: 55px;
height: 60px;
border-radius: 9px;
}
.flex i:hover{
background-color: rgba(255,255,255,0.2);
cursor: pointer;
}
.statement{
text-align: center;
position: absolute;
margin-top: 90px;
width: 100%;
height: 40px;
font-weight: 1000;
color: purple;
}
.btn{
/* margin-bottom: 900px; */
width: 100px;
height: 100px;
position: fixed;
/* left: px; */
top: 0;
/* right: 200px; */
background-color: rebeccapurple;
/* z-index: 3; */
/* position: fixed; */
left: 300px;
}
.img{
margin: 20px;
height: 70px;
width: 200px;
border-radius: 20px;
box-shadow:0px 5px 16px 3px;
}
</style>
<body>
<div class="container">
<div id="index">
<div class="banner">
<button @click="btn"></button>
<div v-if="shang">
<div class="flex">
<img class="img" src="https://1.s91i.faiusr.com/4/AFsIMBAEGAAg_fDW4QUo1PXHkAYwwAc4nAQ!500x500.png.webp?_tm=3&v=1629366135" alt="">
<i class="iconfont">
<svg t="1650508988047" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1254" width="55px" height="60px"><path d="M514.048 512m-481.28 0a481.28 481.28 0 1 0 962.56 0 481.28 481.28 0 1 0-962.56 0Z" fill="#2A78FF" opacity=".06" p-id="1255"></path><path d="M415.744 498.688h197.632c46.08 0 83.968-36.864 83.968-80.896 0-45.056-37.888-80.896-83.968-80.896H415.744c-46.08 0-83.968 36.864-83.968 80.896 0 44.032 36.864 80.896 83.968 80.896z m0-136.192h197.632c31.744 0 57.344 24.576 57.344 54.272S645.12 471.04 613.376 471.04H415.744c-31.744 0-57.344-24.576-57.344-54.272s25.6-54.272 57.344-54.272z m196.608 162.816H415.744c-46.08 0-83.968 36.864-83.968 80.896 0 45.056 37.888 80.896 83.968 80.896h197.632c46.08 0 83.968-36.864 83.968-80.896-1.024-45.056-37.888-80.896-84.992-80.896z m0 135.168H415.744c-31.744 0-57.344-24.576-57.344-54.272s24.576-53.248 55.296-54.272h199.68c31.744 0 57.344 24.576 57.344 55.296-1.024 28.672-26.624 53.248-58.368 53.248z m0 0" fill="#2A78FF" p-id="1256"></path><path d="M588.8 399.36h45.056v32.768h-45.056zM393.216 588.8h45.056v32.768h-45.056z" fill="#2A78FF" p-id="1257"></path></svg>
设置
</i>
<i class="iconfont">
<svg t="1650509921606" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13761" width="200" height="200"><path d="M364.8 396.8m-25.6 0a25.6 25.6 0 1 0 51.2 0 25.6 25.6 0 1 0-51.2 0Z" fill="#3ED214" p-id="13762"></path><path d="M499.2 396.8m-25.6 0a25.6 25.6 0 1 0 51.2 0 25.6 25.6 0 1 0-51.2 0Z" fill="#3ED214" p-id="13763"></path><path d="M569.6 531.2m-19.2 0a19.2 19.2 0 1 0 38.4 0 19.2 19.2 0 1 0-38.4 0Z" fill="#3ED214" p-id="13764"></path><path d="M678.4 531.2m-19.2 0a19.2 19.2 0 1 0 38.4 0 19.2 19.2 0 1 0-38.4 0Z" fill="#3ED214" p-id="13765"></path><path d="M806.4 0H217.6C102.4 0 0 102.4 0 217.6v582.4C0 921.6 102.4 1024 217.6 1024h582.4c121.6 0 217.6-102.4 217.6-217.6V217.6C1024 102.4 921.6 0 806.4 0zM428.8 620.8c-25.6 0-44.8-6.4-70.4-12.8l-70.4 32 19.2-57.6c-44.8-32-70.4-76.8-70.4-128 0-96 89.6-166.4 192-166.4 96 0 179.2 57.6 198.4 134.4h-19.2C518.4 422.4 441.6 492.8 441.6 576c0 12.8 0 25.6 6.4 38.4-6.4 6.4-12.8 6.4-19.2 6.4z m288 70.4l12.8 51.2-51.2-32c-19.2 6.4-38.4 12.8-57.6 12.8-96 0-166.4-64-166.4-140.8 0-76.8 70.4-140.8 166.4-140.8 89.6 0 166.4 64 166.4 140.8 0 38.4-25.6 76.8-70.4 108.8z" fill="#3ED214" p-id="13766"></path></svg>
微信
</i>
<i class="iconfont">
<svg t="1650509945593" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13907" width="200" height="200"><path d="M436.8 140.8s-83.2-6.4-134.4 64c-51.2 64-12.8 166.4 12.8 217.6 25.6 51.2 153.6 262.4 160 268.8 6.4 6.4 12.8 0 12.8 0 0-6.4 12.8-300.8 0-377.6-6.4-76.8-44.8-166.4-51.2-172.8zM155.2 275.2c-6.4 0-76.8 70.4-83.2 134.4-6.4 64 25.6 108.8 102.4 160 76.8 57.6 262.4 160 268.8 147.2 6.4-6.4-70.4-140.8-134.4-236.8-64-102.4-140.8-204.8-153.6-204.8z m25.6 601.6c57.6 25.6 147.2-32 166.4-51.2 25.6-19.2 64-51.2 64-51.2l-320 6.4c6.4 12.8 32 76.8 89.6 96z m6.4-256C129.6 595.2 14.4 524.8 8 524.8c-6.4 0-19.2 83.2 12.8 147.2 38.4 64 108.8 83.2 140.8 83.2 38.4 6.4 256 0 256 0s-172.8-108.8-230.4-134.4z m537.6-422.4c-51.2-70.4-134.4-64-134.4-64-6.4 12.8-44.8 102.4-51.2 179.2-12.8 76.8 0 371.2 0 377.6 0 6.4 6.4 6.4 12.8 0s134.4-211.2 160-268.8c25.6-51.2 64-153.6 12.8-224z m294.4 326.4c-6.4 0-121.6 64-179.2 96-57.6 25.6-230.4 134.4-230.4 134.4 0 6.4 217.6 6.4 256 0 32-6.4 102.4-25.6 140.8-83.2 32-64 12.8-140.8 12.8-147.2zM673.6 832c25.6 19.2 115.2 70.4 166.4 51.2 57.6-25.6 89.6-89.6 89.6-89.6l-320-6.4c0-6.4 44.8 25.6 64 44.8z m281.6-422.4c-6.4-64-70.4-134.4-83.2-134.4-6.4 0-89.6 102.4-153.6 204.8-64 96-140.8 230.4-134.4 243.2 6.4 6.4 192-96 268.8-147.2 76.8-57.6 108.8-102.4 102.4-166.4z" fill="" p-id="13908"></path></svg>
配置
</i>
<i class="iconfont">
<svg t="1650509833837" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="902" width="200" height="200"><path d="M248.779328 511.549505c0 145.124441 117.645736 262.770177 262.770177 262.770177s262.770177-117.645736 262.770177-262.770177S656.672946 248.779328 511.549505 248.779328 248.779328 366.425064 248.779328 511.549505z" p-id="903"></path><path d="M511.549505 0Q543.194165 0 543.194165 31.64566v131.371589q0 31.64566-31.64566 31.64566t-31.64566-31.64566V31.64566Q479.903845 0 511.549505 0z" p-id="904"></path><path d="M149.83139 149.828391q22.37676-22.37676 44.75352 0l92.894002 92.899002q22.37676 22.37676 0 44.753519t-44.753519 0l-92.894003-92.894002q-22.37676-22.37676 0-44.75352z" p-id="905"></path><path d="M31.64566 479.903845h131.371589q31.64566 0 31.64566 31.64566t-31.64566 31.64566H31.64566Q0 543.194165 0 511.549505q0-31.64566 31.64566-31.64566z" p-id="906"></path><path d="M147.854412 827.814107l92.899002-92.899002q22.37676-22.37676 44.753519 0t0 44.75352l-92.894002 92.899002q-22.37676 22.37676-44.753519 0t0-44.75352z" p-id="907"></path><path d="M509.665525 829.326091q31.64566 0 31.64566 31.64566v131.371589q0 31.64566-31.64566 31.64566t-31.64566-31.64566V860.971751q0-31.64566 31.64566-31.64566z" p-id="908"></path><path d="M712.544346 759.966836l22.376759-22.374759q22.37676-22.37676 44.75352 0l92.899002 92.899002q22.37676 22.37676 0 44.753519t-44.75352 0l-92.899002-92.899002q-22.37676-22.37876 0-44.753519z" p-id="909"></path><path d="M860.971751 481.775825h131.371589q31.64566 0 31.64566 31.64566t-31.64566 31.64566H860.971751q-31.64566 0-31.64566-31.64566t31.64566-31.64566z" p-id="910"></path><path d="M737.585077 243.407385l92.899002-92.899002q22.37676-22.37676 44.753519 0t0 44.753519l-92.899002 92.894003q-22.37676 22.37676-44.753519 0t0-44.75352z" p-id="911"></path></svg>
天气
</i>
<i class="iconfont">
<svg t="1650509779961" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1051" width="200" height="200"><path d="M943.157895 519.545263c0-34.384842-2.586947-63.434105-10.24-84.614737 2.533053-21.126737-10.293895-36.971789-30.82779-42.253473h-2.586947c-35.893895-7.922526-61.547789-26.408421-82.081684-63.380211-18.000842-31.744-23.120842-68.715789-10.24-103.046737 7.653053-15.845053 2.533053-37.025684-12.880842-50.229894-38.480842-36.971789-87.255579-66.021053-141.150316-84.506948-15.413895-7.976421-35.947789-2.694737-48.774737 13.204211-23.066947 29.049263-56.427789 44.894316-94.962526 44.894315-33.360842 0-66.721684-15.845053-94.962527-44.894315-17.946947-18.485895-35.893895-15.845053-48.720842-13.204211-56.481684 21.126737-100.082526 47.535158-136.030316 81.92a36.810105 36.810105 0 0 0-15.413894 47.535158c10.24 39.612632 7.706947 76.584421-10.24 108.328421-15.413895 31.690105-46.187789 52.816842-82.135579 63.380211-2.586947 0-5.12 0-5.12 2.694736-12.826947 7.868632-23.120842 18.432-25.70779 31.636211v2.694737C85.962105 458.698105 80.842105 485.106526 80.842105 516.850526c0 34.384842 2.586947 63.434105 10.24 84.560842-2.533053 15.845053 5.173895 31.690105 28.240842 42.253474h2.586948c35.947789 7.922526 61.601684 26.408421 82.135579 63.434105 17.946947 31.690105 23.066947 68.661895 10.24 103.046737-7.706947 15.845053-2.533053 36.971789 12.826947 50.176a419.732211 419.732211 0 0 0 141.204211 87.201684h2.533052c2.586947 0 2.586947 2.640842 5.12 2.640843h5.12a49.960421 49.960421 0 0 0 35.94779-15.845053c23.120842-29.103158 56.481684-44.948211 94.962526-44.948211 33.360842 0 66.721684 15.898947 94.962526 44.948211 10.24 10.563368 20.48 15.845053 33.360842 15.845053 5.12 0 12.826947 0 17.946948-2.640843 59.068632-23.767579 100.082526-50.176 138.617263-84.560842 15.36-10.563368 23.066947-31.690105 15.36-47.535158-10.24-39.666526-7.653053-76.638316 10.24-108.328421 15.467789-31.690105 46.241684-52.816842 82.189474-63.434105 2.533053 0 5.12 0 5.12-2.640842 12.826947-7.922526 23.120842-18.485895 25.653894-31.690105v-2.640842c5.12-29.103158 7.706947-58.098526 7.706948-87.201685zM140.773053 443.014737a179.577263 179.577263 0 0 0 110.861473-86.447158c22.689684-44.517053 30.288842-94.315789 17.677474-144.060632A398.982737 398.982737 0 0 1 385.185684 141.743158c37.834105 36.648421 80.680421 57.667368 128.592842 57.667368 50.391579 0 98.250105-21.018947 128.485053-57.667368 42.846316 15.737263 80.680421 39.343158 113.448421 70.763789-12.611368 52.385684-7.545263 102.130526 17.623579 144.060632a170.307368 170.307368 0 0 0 108.328421 89.088c5.066105 20.965053 7.599158 47.157895 7.599158 73.350737 0 20.965053-2.533053 41.930105-7.545263 70.763789-50.445474 15.683368-88.225684 47.104-108.382316 89.034106-22.635789 44.570947-30.234947 94.315789-17.623579 144.114526a398.982737 398.982737 0 0 1-115.927579 70.709895c-37.834105-36.648421-83.213474-54.972632-128.538947-54.972632-50.391579 0-95.770947 20.911158-128.538948 57.613474a322.398316 322.398316 0 0 1-113.394526-70.76379c12.611368-52.385684 7.545263-102.130526-17.677474-144.060631a170.307368 170.307368 0 0 0-108.328421-89.088A344.010105 344.010105 0 0 1 135.760842 519.006316c-2.533053-26.192842 0-47.157895 5.012211-75.991579z m525.365894 22.635789a27.324632 27.324632 0 0 0-30.073263-17.246315c-12.557474 4.958316-20.102737 19.779368-15.090526 32.121263 7.545263 19.779368 7.545263 44.463158 0 71.68a126.490947 126.490947 0 0 1-55.188211 64.242526c-27.594105 12.395789-57.721263 14.821053-85.315368 4.958316a127.407158 127.407158 0 0 1-65.266526-54.433684c-12.557474-27.162947-15.090526-56.805053-5.012211-83.968A126.490947 126.490947 0 0 1 465.381053 418.762105c27.594105-12.395789 57.721263-14.821053 85.315368-4.958316 12.557474 4.958316 27.648-2.479158 32.660211-14.821052 5.012211-12.395789-2.533053-27.162947-15.090527-32.121263a158.989474 158.989474 0 0 0-125.466947 7.383579c-40.151579 19.779368-70.278737 51.900632-82.782316 91.459368a152.198737 152.198737 0 0 0 7.545263 123.526737c20.048842 39.558737 52.655158 69.200842 92.806737 81.596631 15.090526 4.904421 35.139368 9.862737 52.709053 9.862737a161.899789 161.899789 0 0 0 153.061052-108.705684c10.078316-37.079579 10.078316-71.68 0-106.280421z" fill="#33353B" p-id="1052"></path></svg>
总设置
</i>
<i class="iconfont">
<svg t="1650509725689" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="897" width="200" height="200"><path d="M0 0h1024v1024H0z" fill="#1296db" fill-opacity="0" p-id="898"></path><path d="M832.149333 56.896a97.28 97.28 0 0 1 97.493334 96.896l2.837333 713.173333a97.28 97.28 0 0 1-96.789333 97.621334l-647.786667 2.517333a97.28 97.28 0 0 1-97.493333-96.896l-0.32-65.92a32.362667 32.362667 0 0 1 32.298666-32.490667 32.362667 32.362667 0 0 1 32.512 32.298667l0.298667 65.92A32.426667 32.426667 0 0 0 187.733333 902.314667l647.786667-2.538667a32.554667 32.554667 0 0 0 32.277333-32.490667l-2.816-713.194666a32.426667 32.426667 0 0 0-32.512-32.298667l-647.786666 2.538667A32.554667 32.554667 0 0 0 152.362667 156.8l0.213333 64a32.362667 32.362667 0 0 1-32.298667 32.490667 32.362667 32.362667 0 0 1-32.512-32.298667l-0.213333-64a97.28 97.28 0 0 1 96.810667-97.6l647.786666-2.517333zM155.498667 675.413333a32.362667 32.362667 0 0 1 32.512 32.298667v0.106667c0 17.92-14.485333 32.384-32.298667 32.490666l-64.810667 0.32a32.362667 32.362667 0 0 1-32.490666-32.298666v-0.106667a32.362667 32.362667 0 0 1 32.298666-32.512l64.789334-0.298667zM121.898667 383.829333a32.362667 32.362667 0 0 1 32.490666 32.298667l0.810667 194.581333c0 17.834667-14.378667 32.426667-32.298667 32.512a32.362667 32.362667 0 0 1-32.490666-32.298666L89.6 416.32a32.362667 32.362667 0 0 1 32.298667-32.490667z m32.085333-97.408a32.362667 32.362667 0 0 1 32.512 32.298667v0.106667c0 17.92-14.506667 32.384-32.298667 32.490666l-64.810666 0.298667a32.362667 32.362667 0 0 1-32.490667-32.298667v-0.085333A32.362667 32.362667 0 0 1 89.173333 286.72l64.789334-0.298667z" fill="#1296db" p-id="899"></path><path d="M621.44 474.453333c43.648-20.266667 65.514667-52.16 65.514667-95.893333 0-12.650667-2.133333-24.704-6.272-36.16a103.168 103.168 0 0 0-18.133334-31.274667 109.248 109.248 0 0 0-27.328-23.381333 115.925333 115.925333 0 0 0-41.109333-14.890667c-15.296-2.538667-33.301333-3.84-54.186667-3.84h-141.44c-18.816 0-32.490667 4.245333-40.896 12.650667-8.405333 8.405333-12.650667 22.272-12.650666 41.514667v328.042666c0 18.837333 4.16 32.597333 12.373333 41.194667 8.192 8.618667 21.952 12.970667 41.173333 12.970667h133.354667c22.997333 0 43.136-1.109333 60.458667-3.434667 17.301333-2.346667 32.490667-6.186667 45.866666-11.754667a112.725333 112.725333 0 0 0 50.624-43.328c12.437333-19.541333 18.730667-41.514667 18.730667-65.92 0-52.757333-28.757333-88.277333-86.08-106.517333z m-188.117333-139.029333h71.786666c32.213333 0 56.106667 3.626667 71.786667 10.837333 15.701333 7.274667 23.488 21.866667 23.488 43.946667 0 10.325333-2.517333 19.626667-7.381333 27.946667-6.4 11.733333-15.488 19.626667-27.541334 23.786666-12.053333 4.138667-29.056 6.272-51.029333 6.272h-81.002667v-112.789333h-0.106666z m94.976 303.530667h-94.976v-127.36h91.946666c30.784 0 53.866667 4.970667 69.333334 14.890666 15.509333 9.92 23.210667 25.92 23.210666 47.893334 0.085333 43.114667-29.781333 64.576-89.514666 64.576z" fill="#1296db" p-id="900"></path></svg>
通讯录
</i>
<i class="iconfont">
<svg t="1650509659395" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1068" width="200" height="200"><path d="M537.6 51.2a486.4 486.4 0 1 1 0 972.8 486.4 486.4 0 0 1 0-972.8z m0 243.2a40.5504 40.5504 0 0 0-40.5504 40.5504v243.2l0.3072 4.7104c1.28 11.0592 7.0656 20.992 15.9232 27.6992l162.1504 121.6 4.2496 2.816a40.5504 40.5504 0 0 0 52.48-10.9056l2.816-4.2496a40.5504 40.5504 0 0 0-10.9056-52.5312l-145.9712-109.4144V334.9504l-0.256-4.7616a40.5504 40.5504 0 0 0-40.2432-35.7888z" fill="#1296db" p-id="1069"></path></svg>
时间
</i>
<i class="iconfont">
<svg t="1650509613197" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="877" width="200" height="200"><path d="M982.9376 260.864c-27.1872-27.1872-59.2384-39.4752-96.2048-39.4752h-118.528l-27.1872-71.5776a105.472 105.472 0 0 0-36.9664-44.3904c-17.3056-12.3392-37.0176-19.7632-54.272-19.7632H378.2144c-19.7632 0-36.9664 7.424-54.272 19.7632-17.3056 12.3392-29.696 27.136-37.0176 44.3904l-29.6448 71.5776H136.3968c-36.9664 0-69.12 12.3392-96.1536 39.424-27.1872 27.2384-39.4752 59.2384-39.4752 96.3072v476.3648c0 36.9664 12.3392 69.12 39.424 96.256 27.2384 27.2384 59.2384 39.4752 96.256 39.4752h750.1824c36.9664 0 69.12-12.3392 96.256-39.424 27.136-27.1872 39.424-59.2384 39.424-96.3072V357.12c0.1024-37.0688-12.1856-69.12-39.3728-96.256z m-471.3984 550.4a225.4336 225.4336 0 0 1-224.6144-224.6656A225.4336 225.4336 0 0 1 511.488 361.984a225.3824 225.3824 0 0 1 224.6144 224.6144 225.4336 225.4336 0 0 1-224.6144 224.6656z" fill="#1296db" p-id="878"></path><path d="M511.488 438.5792a149.6064 149.6064 0 0 0-150.528 150.5792c0 83.968 66.6112 150.5792 150.528 150.5792 83.968 0 150.6304-66.6112 150.6304-150.528A149.6064 149.6064 0 0 0 511.488 438.528z" fill="#1296db" p-id="879"></path></svg>
相机
</i>
<i class="iconfont">
<svg t="1650509554216" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1111" width="200" height="200"><path d="M325.632 546.816c-63.488-43.008-100.352-102.4-100.352-178.176 0-61.44 24.576-110.592 69.632-151.552 83.968-75.776 212.992-67.584 288.768 14.336 28.672 30.72 45.056 67.584 51.2 106.496 6.144 38.912 0 79.872-16.384 116.736-18.432 36.864-45.056 67.584-79.872 90.112 2.048 2.048 4.096 2.048 6.144 2.048 106.496 43.008 176.128 118.784 206.848 231.424 6.144 24.576 10.24 51.2 8.192 75.776 0 12.288-8.192 22.528-20.48 22.528-12.288 2.048-24.576-6.144-26.624-18.432-2.048-6.144 0-12.288-2.048-20.48-6.144-92.16-47.104-163.84-120.832-217.088-34.816-24.576-75.776-40.96-118.784-45.056-8.192-2.048-18.432-2.048-26.624-2.048-61.44 0-118.784 12.288-167.936 47.104-59.392 40.96-98.304 96.256-116.736 165.888-6.144 22.528-8.192 45.056-8.192 69.632 0 10.24-8.192 20.48-18.432 22.528-10.24 2.048-22.528-4.096-26.624-14.336-2.048-4.096-2.048-6.144-2.048-10.24 0-98.304 38.912-180.224 112.64-245.76 30.72-26.624 65.536-47.104 104.448-61.44 0 2.048 2.048 0 4.096 0-2.048 0 0 0 0 0z m264.192-176.128c0-88.064-69.632-155.648-151.552-157.696-88.064-4.096-163.84 65.536-163.84 157.696 0 88.064 69.632 157.696 155.648 159.744 88.064-2.048 159.744-71.68 159.744-159.744z m0 0" fill="#1296db" p-id="1112"></path><path d="M747.52 530.432c2.048 0 2.048 2.048 4.096 2.048 79.872 34.816 131.072 96.256 155.648 180.224 8.192 26.624 12.288 53.248 10.24 79.872 0 12.288-8.192 22.528-20.48 24.576-14.336 0-24.576-8.192-24.576-20.48-2.048-12.288-2.048-22.528-2.048-34.816-4.096-38.912-18.432-75.776-40.96-106.496-30.72-43.008-69.632-71.68-120.832-86.016-18.432-6.144-36.864-6.144-55.296-8.192-10.24 0-20.48-8.192-22.528-18.432-2.048-10.24 4.096-22.528 14.336-26.624 4.096-2.048 8.192-2.048 10.24-2.048 51.2-2.048 86.016-28.672 106.496-73.728 28.672-59.392 8.192-131.072-45.056-167.936-18.432-12.288-40.96-20.48-61.44-20.48-16.384 0-26.624-10.24-26.624-24.576 0-12.288 10.24-22.528 22.528-22.528 32.768 0 63.488 8.192 90.112 26.624 45.056 30.72 69.632 71.68 77.824 124.928 8.192 63.488-10.24 116.736-55.296 161.792-4.096 4.096-10.24 8.192-16.384 12.288z m0 0" fill="#1296db" p-id="1113"></path></svg>
朋友圈
</i>
<i class="iconfont">
<svg t="1650509487546" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1543" width="200" height="200"><path d="M514.048 514.048m-481.28 0a481.28 481.28 0 1 0 962.56 0 481.28 481.28 0 1 0-962.56 0Z" fill="#2A78FF" opacity=".1" p-id="1544"></path><path d="M664.576 653.312H363.52c-19.456 0-34.816-15.36-34.816-34.816V409.6c0-19.456 15.36-34.816 34.816-34.816H665.6c19.456 0 34.816 15.36 34.816 34.816v208.896c-1.024 19.456-16.384 34.816-35.84 34.816zM363.52 398.336c-6.144 0-11.264 5.12-11.264 11.264v208.896c0 6.144 5.12 11.264 11.264 11.264H665.6c6.144 0 11.264-5.12 11.264-11.264V409.6c0-6.144-5.12-11.264-11.264-11.264H363.52z m0 0" fill="#2A78FF" p-id="1545"></path><path d="M514.048 530.432c-2.048 0-4.096-1.024-6.144-2.048L392.192 450.56c-4.096-2.048-6.144-6.144-5.12-10.24 0-4.096 3.072-8.192 6.144-10.24 4.096-2.048 8.192-1.024 11.264 1.024l109.568 72.704 109.568-72.704c5.12-3.072 12.288-2.048 15.36 3.072 3.072 5.12 2.048 12.288-3.072 16.384l-115.712 77.824c-2.048 1.024-4.096 2.048-6.144 2.048z m0 0" fill="#2A78FF" p-id="1546"></path></svg>
邮箱
</i>
<i class="iconfont">
<svg t="1650509318260" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1398" width="200" height="200"><path d="M510.976 512m-481.28 0a481.28 481.28 0 1 0 962.56 0 481.28 481.28 0 1 0-962.56 0Z" fill="#2A78FF" opacity=".1" p-id="1399"></path><path d="M484.352 529.408c-29.696-43.008-41.984-71.68-26.624-81.92l5.12-3.072 4.096-3.072c21.504-13.312 23.552-26.624 7.168-59.392-8.192-15.36-17.408-23.552-26.624-24.576-9.216-2.048-18.432 1.024-34.816 12.288l-5.12 3.072-5.12 3.072c-28.672 17.408-13.312 101.376 39.936 179.2 53.248 76.8 126.976 124.928 155.648 107.52l6.144-3.072 6.144-3.072c14.336-8.192 20.48-14.336 23.552-21.504 4.096-10.24 1.024-21.504-12.288-35.84-21.504-24.576-34.816-29.696-51.2-22.528-2.048 1.024-5.12 2.048-8.192 4.096l-9.216 6.144c-1.024 0-1.024 1.024-2.048 1.024-15.36 6.144-37.888-16.384-66.56-58.368z m58.368 37.888c3.072-1.024 7.168-1.024 10.24 1.024 3.072 2.048 5.12 5.12 5.12 8.192h-10.24l-5.12-9.216 3.072-2.048c-1.024 2.048-2.048 2.048-3.072 2.048z m8.192-4.096c4.096-2.048 7.168-4.096 10.24-6.144 25.6-12.288 49.152-3.072 75.776 27.648 17.408 20.48 22.528 39.936 15.36 57.344-5.12 12.288-14.336 20.48-31.744 30.72l-6.144 4.096-5.12 3.072c-41.984 25.6-124.928-27.648-183.296-112.64-58.368-86.016-75.776-181.248-33.792-207.872l4.096-3.072 5.12-3.072c20.48-13.312 33.792-17.408 49.152-15.36 17.408 3.072 30.72 15.36 41.984 35.84 21.504 40.96 18.432 65.536-13.312 86.016-2.048 1.024-4.096 2.048-6.144 4.096 1.024 3.072 2.048 6.144 4.096 10.24 5.12 11.264 14.336 26.624 25.6 44.032 12.288 17.408 23.552 31.744 32.768 40.96 4.096 4.096 7.168 7.168 10.24 8.192l5.12-4.096z m0 0" fill="#2A78FF" p-id="1400"></path></svg>
电话
</i>
</div>
<img style="transition: 2s;" src="https://tse2-mm.cn.bing.net/th/id/OIP-C.NWkU_u4-USnviWQi8m74RAHaNK?w=187&h=333&c=7&r=0&o=5&dpr=1.24&pid=1.7">
</div>
<div v-else>
<div class="statement">“UI设计”</div>
<div class="time">
<div id="hour"></div><p>:</p><div id="minute"></div>
</div>
<img style="transition: 2s;" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.qJxQMg7lTKnkLMOPvFB9dgHaNK?w=187&h=333&c=7&r=0&o=5&dpr=1.24&pid=1.7">
</div>
</div>
</div>
</div>
<button class="btn" type="button" onclick="btn1()">查看作者</button>
</div>
<script>
function shijian(){
const hour = new Date().getHours();
const minute = new Date().getMinutes();
document.getElementById('hour').innerHTML=hour<10?"0"+hour:hour;
document.getElementById('minute').innerHTML=minute<10?"0"+minute:minute;
}
setInterval(function(){
shijian();
})
function btn1(){
alert('此作者为19树莓贯通25罗屹阳')
}
const index = new Vue({
el:'#index',
data:{
shang:false,
},
methods:{
btn(){
this.shang=!this.shang
console.log('debug')
}
}
})
</script>
<script>
console.log(`The author's name:MC LUO
He from ShangHai
welecome to watch my works`)
</script>
</body>
</html>
Loading...
举报
请认真填写举报原因，尽可能描述详细。
请选择举报类型
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化