init
This commit is contained in:
760
xhs-mini-demos/entry/search/search.css
Normal file
760
xhs-mini-demos/entry/search/search.css
Normal file
@@ -0,0 +1,760 @@
|
||||
html,
|
||||
body {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
|
||||
/* 组件主体 */
|
||||
.wrap {
|
||||
padding-bottom: .5rem;
|
||||
font-size: .16rem;
|
||||
}
|
||||
|
||||
/* API主体 */
|
||||
.container {
|
||||
font-size: .16rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
/* radio样式 */
|
||||
.radio {
|
||||
display: block;
|
||||
margin: 0 .17rem;
|
||||
padding: .17rem 0;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
margin: 0 .17rem;
|
||||
padding: .17rem 0;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.item-scroll {
|
||||
display: flex;
|
||||
margin: 0 .17rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* 卡片区域 */
|
||||
.card-area {
|
||||
overflow: hidden;
|
||||
margin: .17rem .17rem 0 .17rem;
|
||||
border-radius: 6px;
|
||||
background: #FFF;
|
||||
}
|
||||
|
||||
/* 展示区 */
|
||||
.display-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 2.18rem;
|
||||
text-align: center;
|
||||
border-radius: 8px 8px;
|
||||
background: #FFF;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.display-area-image {
|
||||
width: 100%;
|
||||
height: 2.2rem;
|
||||
text-align: center;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
/* 描述文字 */
|
||||
.description {
|
||||
height: .46rem;
|
||||
padding-left: .17rem;
|
||||
line-height: .46rem;
|
||||
}
|
||||
|
||||
.top-description {
|
||||
display: flex;
|
||||
padding: .16rem .17rem;
|
||||
font-family: PingFangSC-Medium;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.top-description :first-child {
|
||||
width: 2.93rem;
|
||||
font-size: .15rem;
|
||||
}
|
||||
|
||||
.top-description :nth-child(2) {
|
||||
width: 2.45rem;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: .13rem;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
}
|
||||
/* 模式标题 */
|
||||
.mode-title {
|
||||
display: flex;
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: .16rem;
|
||||
color: #000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.mode-title-first {
|
||||
margin-top: .2rem;
|
||||
}
|
||||
|
||||
.mode-title-text {
|
||||
margin: 0 .12rem;
|
||||
}
|
||||
|
||||
.mode-title-line-left {
|
||||
width: .23rem;
|
||||
height: 1px;
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(90deg, #F5F5F5 0%, #D5D5D5 100%);
|
||||
}
|
||||
|
||||
.mode-title-line-right {
|
||||
width: .23rem;
|
||||
height: 1px;
|
||||
border-radius: 3px;
|
||||
background-image: linear-gradient(-90deg, #F5F5F5 0%, #D5D5D5 100%);
|
||||
}
|
||||
|
||||
/* 结果文字 */
|
||||
.result-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 1.3rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.result-area-fail {
|
||||
width: 2.4rem;
|
||||
margin: 0 auto;
|
||||
font-size: .24rem;
|
||||
text-align: center;
|
||||
color: #F7534F;
|
||||
}
|
||||
|
||||
.result-area-default {
|
||||
width: 2.4rem;
|
||||
margin: 0 auto;
|
||||
font-size: .24rem;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.result-area-succ {
|
||||
width: 2.4rem;
|
||||
margin: 0 auto;
|
||||
font-size: .24rem;
|
||||
text-align: center;
|
||||
color: #38F;
|
||||
}
|
||||
|
||||
.result-area-tips {
|
||||
margin-top: .08rem;
|
||||
font-size: .14rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 按纽区 */
|
||||
.button-group {
|
||||
margin: .3rem 0 .2rem 0;
|
||||
}
|
||||
|
||||
swan-button {
|
||||
margin: .2rem .23rem;
|
||||
font-size: .18rem;
|
||||
line-height: .44rem;
|
||||
}
|
||||
|
||||
.flex-button {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
/* 一个列表项，和border一起使用 */
|
||||
.list-area {
|
||||
margin: 0 .17rem;
|
||||
padding: .14rem 0;
|
||||
font-family: PingFangSC-Regular;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.list-item-key-4 {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.list-item-key-6 {
|
||||
display: inline-block;
|
||||
width: 1.2rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.list-item-value {
|
||||
display: inline-block;
|
||||
width: 2.2rem;
|
||||
vertical-align: middle;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.option-active {
|
||||
background: #F2F2F2;
|
||||
}
|
||||
|
||||
/* 提示 */
|
||||
.tip-week {
|
||||
margin: 0 .14rem .18rem;
|
||||
font-size: .12rem;
|
||||
line-height: .2rem;
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.tip-strong {
|
||||
padding: .11rem .23rem;
|
||||
font-size: .1rem;
|
||||
/* height: .57rem; */
|
||||
text-align: center;
|
||||
color: #EE823A;
|
||||
border-radius: 8px 8px 0 0 ;
|
||||
background-color: #FFF9E3;
|
||||
}
|
||||
|
||||
/* ai 列表样式 */
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.result-item:not(:last-of-type) {
|
||||
margin-bottom: .24rem;
|
||||
}
|
||||
|
||||
.result-item-key-4 {
|
||||
width: .66rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.result-item-key-6 {
|
||||
width: .9rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.result-item-value {
|
||||
width: 2.5rem;
|
||||
margin-left: .19rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.result-item-value-err {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 底部标识title */
|
||||
.page-title {
|
||||
margin: 1rem 0 .3rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-title-line {
|
||||
width: .83rem;
|
||||
height: .02rem;
|
||||
margin: 0 auto;
|
||||
background-color: #E6E6E6;
|
||||
}
|
||||
|
||||
.page-title-text {
|
||||
margin-top: .07rem;
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
.page-top {
|
||||
margin-top: .36rem;
|
||||
text-align: center;
|
||||
}
|
||||
.page-top-line {
|
||||
position: relative;
|
||||
width: .54rem;
|
||||
height: .01rem;
|
||||
margin: 0 auto;
|
||||
border: 0;
|
||||
background-color: #979797;
|
||||
}
|
||||
.page-top-text {
|
||||
margin-bottom: .1rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 上下左右边框 */
|
||||
.border-top {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-top:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
.border-right {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.border-right:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: 100% 0;
|
||||
transform-origin: 100% 0;
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-bottom:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: 0 100%;
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
|
||||
.border-left {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-left:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: #E6E6E6;
|
||||
-webkit-transform-origin: left center;
|
||||
transform-origin: left center;
|
||||
}
|
||||
|
||||
.border-all {
|
||||
position: relative;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #E6E6E6;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border-radius: 0;
|
||||
background: 0 0;
|
||||
-webkit-transform-origin: 0 0;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
/* 组件样式 */
|
||||
.title {
|
||||
padding: .3rem .22rem .18rem .22rem;
|
||||
font-size: .15rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
||||
|
||||
swan-button[type="primary"] {
|
||||
background: #38F;
|
||||
}
|
||||
|
||||
/* 适配各种屏幕 */
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
|
||||
not all {
|
||||
.border-top:before,
|
||||
.border-bottom:after {
|
||||
-webkit-transform: scaleY(.66666667);
|
||||
transform: scaleY(.66666667);
|
||||
}
|
||||
|
||||
.border-right:after,
|
||||
.border-left:before {
|
||||
-webkit-transform: scaleX(.66666667);
|
||||
transform: scaleX(.66666667);
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
width: 150%;
|
||||
height: 150%;
|
||||
-webkit-transform: scale(.66666667);
|
||||
transform: scale(.66666667);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 2),
|
||||
not all {
|
||||
.border-top:before,
|
||||
.border-bottom:after {
|
||||
-webkit-transform: scaleY(.5);
|
||||
transform: scaleY(.5);
|
||||
}
|
||||
|
||||
.border-right:after,
|
||||
.border-left:before {
|
||||
-webkit-transform: scaleX(.5);
|
||||
transform: scaleX(.5);
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
-webkit-transform: scale(.48);
|
||||
transform: scale(.48);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 3),
|
||||
not all {
|
||||
.border-top:before,
|
||||
.border-bottom:after {
|
||||
-webkit-transform: scaleY(.33333333);
|
||||
transform: scaleY(.33333333);
|
||||
}
|
||||
|
||||
.border-right:after,
|
||||
.border-left:before {
|
||||
-webkit-transform: scaleX(.33333333);
|
||||
transform: scaleX(.33333333);
|
||||
}
|
||||
|
||||
.border-all:before {
|
||||
width: 300%;
|
||||
height: 300%;
|
||||
-webkit-transform: scale(.3326);
|
||||
transform: scale(.3326);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 320px) {
|
||||
html {
|
||||
font-size: 77.2946px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 375px) {
|
||||
html {
|
||||
font-size: 90.5797px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 414px) {
|
||||
html {
|
||||
font-size: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.search-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
font-size: .16rem;
|
||||
}
|
||||
|
||||
.search {
|
||||
background-color: #fff;
|
||||
display: flex;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.search-box {
|
||||
background-color: rgba(51, 51, 51, 0.025);
|
||||
color: #000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
border-radius: 20px;
|
||||
padding: 4px 10px;
|
||||
flex: 1;
|
||||
}
|
||||
.search-box:before {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
box-sizing: border-box;
|
||||
position: absolute;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 18px;
|
||||
transform: scale(.5);
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
.search-input {
|
||||
display: inline-block;
|
||||
line-height: .3rem;
|
||||
height: .3rem;
|
||||
font-size: .16rem;
|
||||
text-align: left;
|
||||
}
|
||||
.search-input-sear {
|
||||
display: inline-block;
|
||||
line-height: .3rem;
|
||||
height: .3rem;
|
||||
font-size: .16rem;
|
||||
text-align: left;
|
||||
color: #CCC;
|
||||
}
|
||||
.search-icon {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.search-icon image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.searchholder {
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
.search-sear {
|
||||
color: #ccc;
|
||||
padding: 0 .1rem;
|
||||
position: absolute;
|
||||
font-size: .16rem;
|
||||
}
|
||||
.search-deep {
|
||||
color: #666;
|
||||
padding: 0 .1rem;
|
||||
position: absolute;
|
||||
font-size: .16rem;
|
||||
}
|
||||
|
||||
@media screen
|
||||
and (device-width: 360px)
|
||||
and (device-height: 640px)
|
||||
and (-webkit-device-pixel-ratio: 3) {
|
||||
.search-sear {
|
||||
padding-top: .02rem;
|
||||
}
|
||||
.red {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.active {
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
.btn-hover {
|
||||
color: rgba(102, 102, 102, .2);
|
||||
}
|
||||
|
||||
.search-input-clear {
|
||||
background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/clear-pressed.png) no-repeat center;
|
||||
background-size: contain;
|
||||
width: .18rem;
|
||||
height: .18rem;
|
||||
margin: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
.search-input-clear::after,
|
||||
.search-clear-hover::after {
|
||||
border: none !important;
|
||||
}
|
||||
.search-clear-hover {
|
||||
background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/clear-pressed.png) no-repeat center;
|
||||
background-size: contain;
|
||||
width: .18rem;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: .6rem;
|
||||
}
|
||||
|
||||
.search-his,
|
||||
.search-hot,
|
||||
.search-result {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.his-title {
|
||||
font-size: .15rem;
|
||||
color: #000;
|
||||
height: .44rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.his-icon {
|
||||
background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/clear-pressed.png) no-repeat center;
|
||||
background-size: contain;
|
||||
width: .18rem;
|
||||
height: .18rem;
|
||||
margin-right: .06rem;
|
||||
}
|
||||
|
||||
.hot-title {
|
||||
font-size: .15rem;
|
||||
color: #000;
|
||||
line-height: .44rem;
|
||||
}
|
||||
|
||||
.his-content,
|
||||
.hot-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.his-item,
|
||||
.hot-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 .1rem .1rem 0;
|
||||
background: #f5f5f5;
|
||||
padding: .05rem .14rem;
|
||||
border-radius: .16rem;
|
||||
font-size: .15rem;
|
||||
line-height: .2rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.compontent {
|
||||
margin-bottom: .2rem;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
line-height: .44rem;
|
||||
font-size: .20rem;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.result-list {
|
||||
height: 50px;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.result-up {
|
||||
background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/right_arrow.png) no-repeat center;
|
||||
background-size: contain;
|
||||
width: .26rem;
|
||||
height: .26rem;
|
||||
}
|
||||
|
||||
.empty-result {
|
||||
height: calc(100vh - .82rem);
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: .2rem;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
width: 90px;
|
||||
margin-top: 100px;
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.empty-icon image {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.empty-msg {
|
||||
font-size: .16rem;
|
||||
color: #666;
|
||||
margin-top: .33rem;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
width: 60px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-tag {
|
||||
display: flex;
|
||||
min-height: 44px;
|
||||
justify-content:center;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.search-tag > view {
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 60px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
color: #33333399;
|
||||
}
|
||||
|
||||
.search-tag-select {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: black !important;
|
||||
}
|
||||
|
||||
.search-tag-select::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 7px;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
height: 2px;
|
||||
background-color: #FF2442;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.result_inner {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user