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 @@ + + + + + 知识服务系统 + + + + + + + + + +
+
+

请说话

+ +

+ 取消 + 确定 +

+
+
+ +
+
+

+ + 知识服务系统 +

+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+ +
+ +
+ +
+ +
+
+ + + + + + + + \ No newline at end of file diff --git a/image/1.png b/image/1.png new file mode 100644 index 0000000..05af312 Binary files /dev/null and b/image/1.png differ diff --git a/image/2.png b/image/2.png new file mode 100644 index 0000000..5a193b8 Binary files /dev/null and b/image/2.png differ diff --git a/image/3.png b/image/3.png new file mode 100644 index 0000000..e559350 Binary files /dev/null and b/image/3.png differ diff --git a/image/4.png b/image/4.png new file mode 100644 index 0000000..50a19b0 Binary files /dev/null and b/image/4.png differ diff --git a/image/banner.png b/image/banner.png new file mode 100644 index 0000000..e87d3f1 Binary files /dev/null and b/image/banner.png differ diff --git a/image/voice.gif b/image/voice.gif new file mode 100644 index 0000000..1414e6e Binary files /dev/null and b/image/voice.gif differ