Skip to content

P
pica.cloud.web-education-admin
提交 8bc69e99 编写于 作者: 杨广俊's avatar 杨广俊
浏览文件
操作

搜索框样式

上级 b307db46
隐藏空白字符变更
内嵌 并排
正在显示 包含 35 行增加 和 79 行删除
src/.DS_Store
浏览文件 @ 8bc69e99
无法预览此类型文件
src/views/result.vue
浏览文件 @ 8bc69e99
......@@ -9,7 +9,7 @@
<form @submit.prevent="search">
<!-- <mt-search v-model="searchText" ></mt-search> -->
<div class="search-container">
<img class="search-container-img" @click="back" src="../images/sousuo/right-throw.png"/>
<img class="search-container-img" @click="back" src="../images/sousuo/left-arrow-black.png"/>
<div >
<span class="search-container-img2"><img class="search-container-img" src="../images/sousuo/search-black.png"/></span>
<input class="search-container-input" type="search" v-model="searchText" maxlength="100">
......@@ -352,55 +352,6 @@ export default {
},
}
</script>
<style >
/* .mint-search {
position: fixed;
top: 0px;
z-index: 3 !important;
height: 66px;
width: 100%;
border-bottom: 1px solid #E7E7E7 !important;
} */
.mint-search {
position: fixed;
top: 0px;
z-index: 3;
height: 66px;
width: 100%;
/* margin: 0 20px; */
border-bottom: 1px solid #E7E7E7 !important;
/* background-color: #fff; */
}
.mint-searchbar {
position: relative;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #fff;
box-sizing: border-box;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 10px;
padding: 30px 10px 8px;
z-index: 3;
}
.mint-searchbar-cancel {
margin-left: 10px;
font-size: 14px ;
color: #999;
text-decoration: none;
}
.mint-searchbar-inner {
background: #F5F6F6;
/* border-radius: 15px; */
}
.mint-searchbar-core {
color: #555555;
background: #F5F6F6;
}
</style>
<style lang="scss" scoped>
@import '../style/mixin.scss';
// .search-form {
......@@ -457,24 +408,25 @@ export default {
.search-container {
display: flex;
position: fixed;
flex-direction: row;
text-align: center;
top: 0;
left: 0;
z-index: 3;
width: 100%;
flex-direction: row;
text-align: center;
padding: px2rem(10px) 0;
background: #fff;
border-bottom: 1px solid #E7E7E7;
&-img {
padding: px2rem(22px) 0 0 px2rem(10px);
width: px2rem(18px);
height: px2rem(18px);
padding: px2rem(21px) 0 0 px2rem(16px);
width: px2rem(20px);
height: px2rem(20px);
// transform: rotate(180deg);
}
&-img2 {
position: absolute;
top: px2rem(10px);
left: px2rem(30px);
top: px2rem(9.5px);
left: px2rem(24px);
z-index: 2;
img {
width: px2rem(22px);
......@@ -483,8 +435,8 @@ export default {
}
&-img3 {
position: absolute;
top: px2rem(10px);
left: px2rem(280px);
top: px2rem(9px);
left: px2rem(274px);
z-index: 2;
img {
width: px2rem(22px);
......@@ -497,17 +449,19 @@ export default {
left: px2rem(0px);
width: px2rem(280px);
height: px2rem(26px);
margin-left: px2rem(10px);
padding-left: px2rem(22px);
padding-right: px2rem(32px);
margin-left: px2rem(0px);
// padding-left: px2rem(26px);
// padding-right: px2rem(28px);
padding: px2rem(1px) px2rem(28px) 0 px2rem(26px);
border-radius: px2rem(4px);
background: rgba(246, 246, 246, 1);
font-size: px2rem(13px);
color: #666;
-webkit-appearance: none;
}
&-cancle {
position: relative;
top: px2rem(2px);
top: px2rem(1px);
left: 0;
height: px2rem(14px);
line-height: px2rem(14px);
......
src/views/search-index.vue
浏览文件 @ 8bc69e99
......@@ -5,7 +5,7 @@
<form @submit.prevent="search">
<!-- <mt-search v-model="searchText" ></mt-search> -->
<div class="search-container">
<img class="search-container-img" @click="back" src="../images/sousuo/right-throw.png"/>
<img class="search-container-img" @click="back" src="../images/sousuo/left-arrow-black.png"/>
<div >
<span class="search-container-img2"><img class="search-container-img" src="../images/sousuo/search-black.png"/></span>
<input class="search-container-input" type="search" v-model="searchText" maxlength="100">
......@@ -20,8 +20,6 @@
<!-- <div class="mt-100"></div> -->
<HistoryLabels/>
<HotLabels/>
dev 环境
<img src="https://test1-file.yunqueyi.com/image/HJ_B001_YD_002_A.jpg" @click="gotoPage">
</div>
</template>
......@@ -237,23 +235,25 @@ export default {
.search-container {
display: flex;
position: relative;
flex-direction: row;
text-align: center;
top: 0;
left: 0;
z-index: 3;
width: 100%;
flex-direction: row;
text-align: center;
padding: px2rem(10px) 0;
background: #fff;
border-bottom: 1px solid #E7E7E7;
&-img {
padding: px2rem(22px) 0 0 px2rem(10px);
width: px2rem(18px);
height: px2rem(18px);
padding: px2rem(21px) 0 0 px2rem(16px);
width: px2rem(20px);
height: px2rem(20px);
// transform: rotate(180deg);
}
&-img2 {
position: absolute;
top: px2rem(10px);
left: px2rem(30px);
top: px2rem(9.5px);
left: px2rem(24px);
z-index: 2;
img {
width: px2rem(22px);
......@@ -262,8 +262,8 @@ export default {
}
&-img3 {
position: absolute;
top: px2rem(10px);
left: px2rem(280px);
top: px2rem(9px);
left: px2rem(274px);
z-index: 2;
img {
width: px2rem(22px);
......@@ -276,17 +276,19 @@ export default {
left: px2rem(0px);
width: px2rem(280px);
height: px2rem(26px);
margin-left: px2rem(10px);
padding-left: px2rem(22px);
padding-right: px2rem(32px);
margin-left: px2rem(0px);
// padding-left: px2rem(26px);
// padding-right: px2rem(28px);
padding: px2rem(1px) px2rem(28px) 0 px2rem(26px);
border-radius: px2rem(4px);
background: rgba(246, 246, 246, 1);
font-size: px2rem(13px);
color: #666;
-webkit-appearance: none;
}
&-cancle {
position: relative;
top: px2rem(2px);
top: px2rem(1px);
left: 0;
height: px2rem(14px);
line-height: px2rem(14px);
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或