@charset "UTF-8"; /** * 下方引入的为Tuniao UI的集成样式文件,为scss预处理器,其中包含了一些"tn-"开头的自定义变量 * 使用的时候,请将下面的一行复制到您的uniapp项目根目录的uni.scss中即可 * Tuniao UI自定义的css类名和scss变量,均以"tn-"开头,不会造成冲突,请放心使用 */ .w-select.data-v-5fdefe44 { --select-wrap-width: 100%; --select-wrap-height: 30px; --select-border-radius: 4px; --select-border: 1px solid #dcdfe6; --select-active-border: 1px solid #409eff; --select-options-max-height: 70vh; --select-option-item-font-size: 14px; --select-input-font-size: 14px; --no-data-default-color: #999999; --select-options-box-shadow: 0px 0px 12px rgb(0 0 0 / 12%); --select-bg-color: #ffffff; } .w-select .select-wrap.data-v-5fdefe44 { position: relative; display: flex; justify-content: space-between; align-items: center; width: var(--select-wrap-width); height: var(--select-wrap-height); border: var(--select-border); border-radius: var(--select-border-radius); background-color: var(--select-bg-color); transition: all 0.2s; } .w-select .select-wrap input.data-v-5fdefe44 { padding: 0 10px; width: 100%; min-width: 0; height: 100%; font-size: var(--select-input-font-size); flex: 1; } .w-select .select-wrap .select-content.data-v-5fdefe44 { display: flex; align-items: center; font-size: var(--select-option-item-font-size); } .w-select .select-wrap .select-content .select-content-item.data-v-5fdefe44 { margin-left: 5px; padding: 2px 6px; border-radius: var(--select-border-radius); color: #aa93b1; background-color: #f4f4f5; } .w-select .select-wrap .select-content .select-content-item-default.data-v-5fdefe44 { margin-left: 5px; color: var(--no-data-default-color); } .w-select .select-wrap .close-icon.data-v-5fdefe44 { position: absolute; top: 50%; right: 7px; z-index: 1000; width: 15px; height: 15px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .w-select .select-wrap .close-icon image.data-v-5fdefe44 { width: 100%; height: 100%; } .w-select .select-wrap .position-bottom.data-v-5fdefe44 { top: calc(var(--select-wrap-height) + 10px); } .w-select .select-wrap .position-top.data-v-5fdefe44 { bottom: calc(var(--select-wrap-height) + 10px); } .w-select .select-wrap .select-options.data-v-5fdefe44 { position: absolute; right: 0; left: 0; z-index: 9999; overflow: scroll; padding: 10px 0 10px 0px; max-height: var(--select-options-max-height); border-radius: var(--select-border-radius); background-color: var(--select-bg-color); box-shadow: var(--select-options-box-shadow); } .w-select .select-wrap .select-options .select-option-item.data-v-5fdefe44 { margin-bottom: 5px; padding: 10px; font-size: var(--select-option-item-font-size); transition: background-color 0.2s; } .w-select .select-wrap .select-options .item-active.data-v-5fdefe44 { font-weight: 700; color: #409eff; background-color: #f5f7fa; } .w-select .select-wrap .select-options .options-no-data.data-v-5fdefe44 { font-size: var(--select-option-item-font-size); text-align: center; color: var(--no-data-default-color); } .w-select .select-wrap .w-select-arrow.data-v-5fdefe44 { display: inline-block; margin: 3px 10px 0; width: 8px; height: 8px; border-top: 1px solid transparent; border-right: 1px solid transparent; border-bottom: 1px solid #999999; border-left: 1px solid #999999; transition: all 0.3s; -webkit-transform: translateY(-50%) rotate(-45deg); transform: translateY(-50%) rotate(-45deg); } .w-select .select-wrap .w-select-arrow-up.data-v-5fdefe44 { -webkit-transform: rotate(-225deg); transform: rotate(-225deg); } .w-select .select-wrap-active.data-v-5fdefe44 { border: var(--select-active-border); } .w-select .animation-bottom-in.data-v-5fdefe44 { -webkit-animation-name: bottom-in-data-v-5fdefe44; animation-name: bottom-in-data-v-5fdefe44; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .w-select .animation-bottom-out.data-v-5fdefe44 { -webkit-animation-name: bottom-out-data-v-5fdefe44; animation-name: bottom-out-data-v-5fdefe44; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .w-select .animation-top-in.data-v-5fdefe44 { -webkit-animation-name: top-in-data-v-5fdefe44; animation-name: top-in-data-v-5fdefe44; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .w-select .animation-top-out.data-v-5fdefe44 { -webkit-animation-name: top-out-data-v-5fdefe44; animation-name: top-out-data-v-5fdefe44; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes bottom-in-data-v-5fdefe44 { 0% { opacity: 0; -webkit-transform: translateY(-15%); transform: translateY(-15%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bottom-in-data-v-5fdefe44 { 0% { opacity: 0; -webkit-transform: translateY(-15%); transform: translateY(-15%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes bottom-out-data-v-5fdefe44 { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20%); transform: translateY(-20%); } } @keyframes bottom-out-data-v-5fdefe44 { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20%); transform: translateY(-20%); } } @-webkit-keyframes top-in-data-v-5fdefe44 { 0% { opacity: 0; -webkit-transform: translateY(15%); transform: translateY(15%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes top-in-data-v-5fdefe44 { 0% { opacity: 0; -webkit-transform: translateY(15%); transform: translateY(15%); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes top-out-data-v-5fdefe44 { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20%); transform: translateY(20%); } } @keyframes top-out-data-v-5fdefe44 { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20%); transform: translateY(20%); } } .w-select .contentMask.data-v-5fdefe44 { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 998; width: 100%; height: 100%; }