/** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果您是插件开发者,建议您使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果您是App开发者(插件使用者),您可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果您的项目同样使用了scss预处理,您也可以直接在您的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ @keyframes breathe-d917afbe { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } } .u-char-box[data-v-d917afbe] { text-align: center; } .u-char-flex[data-v-d917afbe] { display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; position: relative; } .u-input[data-v-d917afbe] { position: absolute; top: 0; left: -100%; width: 200%; height: 100%; text-align: left; z-index: 9; opacity: 0; background: none; } .u-char-item[data-v-d917afbe] { position: relative; width: 2.8125rem; height: 2.8125rem; margin: 0.3125rem 0.3125rem; font-size: 1.875rem; font-weight: bold; color: #303133; line-height: 2.8125rem; display: flex; flex-direction: row; justify-content: center; align-items: center; } .u-middle-line[data-v-d917afbe] { border: none; } .u-box[data-v-d917afbe] { box-sizing: border-box; border: 0.0625rem solid #cccccc; border-radius: 0.1875rem; } .u-box-active[data-v-d917afbe] { overflow: hidden; animation-timing-function: ease-in-out; animation-duration: 1500ms; animation-iteration-count: infinite; animation-direction: alternate; border: 0.0625rem solid #2979ff; } .u-middle-line-active[data-v-d917afbe] { background: #2979ff; } .u-breathe[data-v-d917afbe] { animation: breathe-d917afbe 2s infinite ease; } .u-placeholder-line[data-v-d917afbe] { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0.0625rem; height: 1.25rem; background: #333333; animation: twinkling 1.5s infinite ease; } .u-animation-breathe[data-v-d917afbe] { animation-name: breathe-d917afbe; } .u-dot[data-v-d917afbe] { font-size: 1.0625rem; line-height: 1.0625rem; } .u-middle-line[data-v-d917afbe] { height: 4px; background: #000000; width: 80%; position: absolute; border-radius: 2px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .u-bottom-line-active[data-v-d917afbe] { background: #2979ff; } .u-bottom-line[data-v-d917afbe] { height: 4px; background: #000000; width: 80%; position: absolute; border-radius: 2px; bottom: 0; left: 50%; transform: translate(-50%); } /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果您是插件开发者,建议您使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果您是App开发者(插件使用者),您可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果您的项目同样使用了scss预处理,您也可以直接在您的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ /* 透明度 */ /* 文章场景相关 */ .login-container[data-v-7f72106f] { display: flex; flex-direction: column; min-height: 100vh; width: 100%; background-color: #eff1fc; position: relative; } .login-container .photo-imge[data-v-7f72106f] { position: absolute; top: 6.25rem; left: 0; width: 100%; height: 40.625rem; } .under-container-title[data-v-7f72106f] { margin-top: 8.4375rem; margin-bottom: 0.625rem; font-size: 0.78125rem; font-weight: 500; width: 100%; } .under-container-title .code-title[data-v-7f72106f] { margin-left: 2.5rem; font-size: 1.25rem; color: #333333; font-weight: 600; margin-bottom: 0.625rem; } .under-container-title .code-number[data-v-7f72106f] { margin-left: 2.5rem; font-size: 0.78125rem; margin-bottom: 0.625rem; display: flex; align-items: center; } .captcha-container[data-v-7f72106f] { display: flex; flex-direction: column; align-items: center; margin-top: 0.625rem; margin-bottom: 0.625rem; } .right-blue[data-v-7f72106f] { color: #0083FF; margin-left: 2.1875rem; } .right-white[data-v-7f72106f] { color: #c2c6d3; margin-left: 2.1875rem; } .right-black[data-v-7f72106f] { margin-right: 3.4375rem; color: #00A2FF; } .under-view[data-v-7f72106f] { width: 100%; margin-top: 0.3125rem; display: flex; justify-content: space-between; } /* 遮罩 */ .overlay[data-v-7f72106f] { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 998; } /* 弹窗 */ .modal[data-v-7f72106f] { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #fff; z-index: 999; border-top-left-radius: 1.5625rem; border-top-right-radius: 1.5625rem; width: 100%; height: 15.625rem; display: flex; flex-direction: column; align-items: center; } .modal .modal-title[data-v-7f72106f] { font-size: 1rem; font-weight: 700; margin: 1.5625rem 0; margin-bottom: 0.9375rem; } .modal .model-p[data-v-7f72106f] { padding: 0 1.5625rem; width: 100%; font-size: 0.9375rem; } .modal .model-down[data-v-7f72106f] { display: flex; width: 100%; justify-content: space-between; padding: 0 1.5625rem; margin-top: 1.25rem; } .modal .model-down .model-white[data-v-7f72106f] { border-radius: 1.5625rem; width: 9.375rem; height: 2.96875rem; border: 0.15625rem solid #008dff; color: #008dff; font-size: 1.09375rem; display: flex; justify-content: center; align-items: center; } .modal .model-down .model-blue[data-v-7f72106f] { border-radius: 1.5625rem; width: 9.375rem; height: 2.96875rem; background: linear-gradient(to right, #00C9FF, #0076FF); color: #fff; font-size: 1.09375rem; display: flex; justify-content: center; align-items: center; } /* 动画:遮罩淡入淡出 */ .fade-enter-active[data-v-7f72106f], .fade-leave-active[data-v-7f72106f] { transition: opacity 0.3s; } .fade-enter-from[data-v-7f72106f], .fade-leave-to[data-v-7f72106f] { opacity: 0; } .fade-enter-to[data-v-7f72106f], .fade-leave-from[data-v-7f72106f] { opacity: 1; } /* 动画:弹窗上滑 */ .slide-up-enter-active[data-v-7f72106f], .slide-up-leave-active[data-v-7f72106f] { transition: transform 0.3s; } .slide-up-enter-from[data-v-7f72106f], .slide-up-leave-to[data-v-7f72106f] { transform: translateY(100%); } .slide-up-enter-to[data-v-7f72106f], .slide-up-leave-from[data-v-7f72106f] { transform: translateY(0); } .text-view[data-v-7f72106f] { margin-bottom: 0.625rem; } .back-img[data-v-7f72106f] { position: absolute; top: 3.125rem; left: 0.9375rem; width: 1.5625rem; height: 1.5625rem; } .code-font[data-v-7f72106f] { font-weight: 600; font-size: 0.9375rem; margin-left: 0.46875rem; }