|
|
@@ -160,18 +160,119 @@
|
|
|
.center-content .search {
|
|
|
height: 100px;
|
|
|
background-image: linear-gradient(160deg, #3377fe, #4c6fff, #8370ff, #ba59ff);
|
|
|
- padding: 1px;
|
|
|
+ /*padding: 1px;*/
|
|
|
+ border: 1px solid transparent;
|
|
|
border-radius: 20px;
|
|
|
- /* overflow: hidden; */
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.center-content .search .seacrh-content {
|
|
|
background-color: #fff;
|
|
|
height: 100px;
|
|
|
- border-radius: 20px;
|
|
|
+ padding: 8px 20px;
|
|
|
+ /* border-radius: 20px; */
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-content .search-input input {
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-content .search-btn {
|
|
|
+ margin-top: 13px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-content .search-btn .left-btn {
|
|
|
+ float: left;
|
|
|
+ border: 0.5px solid #DBDCE0;
|
|
|
+ height: 38px;
|
|
|
+ color: #4E6EF2;
|
|
|
+ font-weight: 500;
|
|
|
+ padding: 0 18px 0 15px;
|
|
|
+ border-radius: 12px;
|
|
|
+ line-height: 38px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-content .left-btn img {
|
|
|
+ height: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-content .search-btn .right-btn {
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-content .right-btn .icon-btn {
|
|
|
+ float: left;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-content .icon-btn .iconfont {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-content .right-btn .input-btn {
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .center-content .input-btn input {
|
|
|
+ font-size: 17px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 15px;
|
|
|
+ border: none;
|
|
|
+ width: 108px;
|
|
|
+ height: 44px;
|
|
|
+ background-image: linear-gradient(136deg, #286aff, #4e6ef2, #7274f9, #9f66ff);
|
|
|
}
|
|
|
|
|
|
/* 中间内容区域 search end */
|
|
|
+ /* 其他按钮区域 start */
|
|
|
+ .btn{
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ .btn ul li{
|
|
|
+ float: left;
|
|
|
+ background-color: #f6f7fe;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ padding: 0 15px;
|
|
|
+ border-radius: 12px;
|
|
|
+ margin-right: 12px;
|
|
|
+ color: #333;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .btn ul li:first-child span{
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .btn ul li:first-child div{
|
|
|
+ float: left;
|
|
|
+ background-color: #fff;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ padding:0 10px;
|
|
|
+ border-radius: 15px;
|
|
|
+ color: #4e6ef2;
|
|
|
+ margin-top: 3px;
|
|
|
+ }
|
|
|
+ .btn ul li.active::after{
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ background-color: red;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ /* 其他按钮区域 end */
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -226,14 +327,14 @@
|
|
|
<div class="search-input">
|
|
|
<input type="text" placeholder="请输入搜索内容">
|
|
|
</div>
|
|
|
- <div class="search-btn">
|
|
|
+ <div class="search-btn clearfix">
|
|
|
<div class="left-btn">
|
|
|
<div class="wen-btn">
|
|
|
<i class="iconfont icon-AIduihua"></i>
|
|
|
<img src="./img/baidu/wen.png" alt="wen">
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="right-btn">
|
|
|
+ <div class="right-btn clearfix">
|
|
|
<div class="icon-btn">
|
|
|
<i class="iconfont icon-yuyin"></i>
|
|
|
<i class="iconfont icon-attachment"></i>
|
|
|
@@ -246,7 +347,35 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="btn"></div>
|
|
|
+ <div class="btn">
|
|
|
+ <!-- 其他按钮区域 -->
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <span>复杂问题就找文心助手 👉</span>
|
|
|
+ <div>立即体验</div>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-tupian"></i>
|
|
|
+ <span>AI生图</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-tupian"></i>
|
|
|
+ <span>AI写作</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-tupian"></i>
|
|
|
+ <span>测运势</span>
|
|
|
+ </li>
|
|
|
+ <li class="active">
|
|
|
+ <i class="iconfont icon-tupian"></i>
|
|
|
+ <span>生成视频</span>
|
|
|
+ </li>
|
|
|
+ <li class="active">
|
|
|
+ <i class="iconfont icon-tupian"></i>
|
|
|
+ <span>更多</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</body>
|
|
|
|
