From 4a7def85f17c397ec325eda0f0298761e0d6cc53 Mon Sep 17 00:00:00 2001 From: caicai8 <1149225589@qq.com> Date: Wed, 18 Dec 2019 18:28:38 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E7=89=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/demo.css | 143 +++- css/flexleft.css | 30 +- demo_1.html | 1872 ++++++++++++++++++++++++++++++++++++++++++++++ image/1.png | Bin 0 -> 3497 bytes image/2.png | Bin 0 -> 3196 bytes image/3.png | Bin 0 -> 3419 bytes image/4.png | Bin 0 -> 2284 bytes image/banner.png | Bin 0 -> 1182872 bytes image/voice.gif | Bin 0 -> 8789 bytes 9 files changed, 2027 insertions(+), 18 deletions(-) create mode 100644 demo_1.html create mode 100644 image/1.png create mode 100644 image/2.png create mode 100644 image/3.png create mode 100644 image/4.png create mode 100644 image/banner.png create mode 100644 image/voice.gif diff --git a/css/demo.css b/css/demo.css index 1c99286..1ba5a9c 100644 --- a/css/demo.css +++ b/css/demo.css @@ -92,9 +92,9 @@ body{ height: 40%; } .screen-btn{ - position: absolute; + position: fixed; left: -50px; - top: 60px; + top: 70px; color: #fff; z-index: 100; cursor: pointer; @@ -103,8 +103,32 @@ body{ .show_detail{ position: relative; - top: 2px; } +.search-menu{ + width: 30px; + height: 60px; + line-height: 60px; + float: right; + position: relative; +} +.search-input-item{ + opacity: 0; + position: relative; + top: -1px; + outline: none; + border: none; + width: 0px; + height: 32px; + border-radius: 4px; + transition: .3s; +} +.search-input-item.active{ + opacity: 1; + width: 160px; + padding: 0 10px; + margin-right: 10px; +} +.ml10{margin-left: 10px;} .more_icon{ display: inline-block; width: 30px; @@ -122,26 +146,26 @@ body{ } .detail_info{ - /* display: block; */ display: none; position: absolute; background: #fff; - /* padding: 10px 0; */ - left: 40px; - top: 6px; + left: -20px; + top: 50px; border-radius: 5px; z-index: 50; + transition: .3s; } .detail_info::before{ position: absolute; - right: 100%; - top: 12px; + right: 50%; + top: -16px; + margin-right: -6px; content: ''; width: 0; height: 0; - border: 6px solid transparent; - border-right-color: #fff; + border: 8px solid transparent; + border-bottom-color: #fff; } .info_txt{ width: 45px; @@ -153,6 +177,7 @@ body{ text-align: left; color: black; transition: color .3s; + text-align: center; } .info_txt:hover{ color: #1890ff; @@ -244,4 +269,100 @@ body{ .drop-down-item{ width: 40px; } +.main-panel{ + position: relative; +} +.banner-header{ + background:url('../image/banner.png') top center; + background-size: 100% 100%; + height: 380px; +} +.banner-panel{ + padding-top: 60px; + position: relative; +} +.carouselBottom{ + position: absolute; + width: 100%; + height: 76px; + bottom: 0px; + background: rgba(0, 0, 0, 0.3); + display: flex; + justify-content: center; +} +.carouselBottom .bottomItem{ + display: flex; + align-items: center; + padding:0px 60px; + color: #fff; + font-size: 20px; +} +.carouselBottom .bottomItem img{ + margin:0px 20px 0px 10px; + width: 38px; +} +.carouselBottom .bottomItem:hover,.carouselBottom .bottomItem.active { + background: rgba(255,255,255,0.2); +} +.map_left { + display: flex; + align-items: center; + min-width: 20%; + justify-content: space-between; + height: 100%; +} +.map-nav{ + display: flex; + height: 100%; +} +.map-nav li{ + padding:0px 10px; + height: 100%; + display: flex; + align-items: center; +} +.map-nav li a{ + color: #fff; +} + +.voicePanel{ + position: fixed; + top:0px; + left: 0px; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + opacity: 0; + z-index: -100; +} +.voicePanel.active{ + opacity: 1; + z-index: 10000; +} +.voice-vocal{ + width: 200px; + height: 200px; + border-radius: 14px; + background: rgba(0,0,0,0.8); + display: flex; + align-content: flex-end; + flex-direction: column; + color: rgba(255,255,255,0.7); + align-items: center; +} +.voice-btn{ + width: 100%; + margin-top: 15px; +} +.voice-btn a{ + margin:0px 12px; + color: rgba(255,255,255,0.7); + font-size: 13px; +} +.voice-btn a:hover{ + color: rgba(255,255,255,1); +} \ No newline at end of file diff --git a/css/flexleft.css b/css/flexleft.css index 6f5bd5c..9a77deb 100644 --- a/css/flexleft.css +++ b/css/flexleft.css @@ -4,7 +4,7 @@ bottom: 0; left: -400px; width: 400px; - padding-top: 50px; + padding-top: 60px; z-index: 40; transition: width .3s; } @@ -54,12 +54,14 @@ position: fixed; justify-content: space-between; align-items: center; - height: 50px; + height: 60px; left: 0; right: 0; - background: rgba(78, 173, 222, 1); + background: #141D21; z-index: 100; transition: .3s; + padding: 0px 100px; + box-sizing: border-box; } .logo_txt{ @@ -76,24 +78,38 @@ .user_info{ padding-right: 30px; font-size: 0; + display: flex; + align-items: center; } .user_info .info-item{ display: inline-block; vertical-align: top; font-size: 14px; - color: #fff; + color: #e2e2e2; line-height: 50px; cursor: pointer; } + +.search-Panel{ + display: block; + color: #fff; + text-align: center; + margin-right: 30px; + line-height: 60px; + height: 60px; + font-size: 18px; + cursor: pointer; + position: relative; + display: flex; + align-items: center; +} + .info-item .user_img{ - /* display: inline-block; */ position: relative; width: 30px; height: 30px; border-radius: 50%; top: 10px; - margin-right: 10px; - } .info-item .user_nick{ diff --git a/demo_1.html b/demo_1.html new file mode 100644 index 0000000..bc7b96e --- /dev/null +++ b/demo_1.html @@ -0,0 +1,1872 @@ + + +
+ +usRSD
z)@xVz{v2u$PSSODCLDKVy1{c7T6LE NwRo>Kh$Lb#R`UXjK!x~D;spO
z^kJD{(9Yk2IgZ;F_^KZfUy`-uqh1*J4YzCyM}+q@+HcYC5C;x314Cm!FCKXYmm0kF
z85c_mKiRlGcErh@VU>9)l`l~)(a6)4aTK_iBx}vRXkHzIQrq+_9E$5Mj@yIM+At&Z
zg`eWh<5cH
Rk--pa&ow0YXZ@`kL@X{N6oyNAEo1a
zN92_%1Y!|A0~fncv@}1?@c*e;|z_O`oTmKD4emlS30`ANsAXE}`1oDaBGfh2BL;
zBsr%CEg;$55jE(Bg<0H7L=y{>#@esZt~&&Hv4-*