|
|
@@ -0,0 +1,488 @@
|
|
|
+@charset "UTF-8";
|
|
|
+/**
|
|
|
+ * 这里是app内置的常用样式变量
|
|
|
+ *
|
|
|
+ * app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
|
|
+ * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
|
|
+ *
|
|
|
+ */
|
|
|
+/**
|
|
|
+ * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
|
|
+ *
|
|
|
+ * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
|
|
+ */
|
|
|
+/* 颜色变量 */
|
|
|
+/* 水平间距 */
|
|
|
+/* 水平间距 */
|
|
|
+/* 行为相关颜色 */
|
|
|
+/* 文字基本颜色 */
|
|
|
+/* 背景颜色 */
|
|
|
+/* 边框颜色 */
|
|
|
+/* 尺寸变量 */
|
|
|
+/* 文字尺寸 */
|
|
|
+/* 图片尺寸 */
|
|
|
+/* Border Radius */
|
|
|
+/* 水平间距 */
|
|
|
+/* 垂直间距 */
|
|
|
+/* 透明度 */
|
|
|
+/* 文章场景相关 */
|
|
|
+/*每个页面公共css */
|
|
|
+page {
|
|
|
+ font-family: Source Han Sans CN Normal, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
|
|
|
+ background-color: #f3f5f9;
|
|
|
+ font-weight: normal;
|
|
|
+}
|
|
|
+view {
|
|
|
+ box-sizing: border-box;
|
|
|
+ line-height: 1.41176471;
|
|
|
+ word-break: break-all;
|
|
|
+}
|
|
|
+image {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
+.bold {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+.textarea-placeholder,
|
|
|
+.input-placeholder {
|
|
|
+ color: #d2d2d2;
|
|
|
+}
|
|
|
+/* 宽高 */
|
|
|
+.w-100 {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.w-50 {
|
|
|
+ width: 50%;
|
|
|
+}
|
|
|
+/*文字大小*/
|
|
|
+.font-10 {
|
|
|
+ font-size: 20rpx !important;
|
|
|
+}
|
|
|
+.font-12 {
|
|
|
+ font-size: 24rpx !important;
|
|
|
+}
|
|
|
+.font-14 {
|
|
|
+ font-size: 28rpx !important;
|
|
|
+}
|
|
|
+.font-16 {
|
|
|
+ font-size: 32rpx !important;
|
|
|
+}
|
|
|
+.font-24 {
|
|
|
+ font-size: 48rpx !important;
|
|
|
+}
|
|
|
+/*行高*/
|
|
|
+.line-h0 {
|
|
|
+ line-height: 0 !important;
|
|
|
+}
|
|
|
+.line-h {
|
|
|
+ line-height: 1 !important;
|
|
|
+}
|
|
|
+.line-h-sm {
|
|
|
+ line-height: 1.2 !important;
|
|
|
+}
|
|
|
+.line-h-md {
|
|
|
+ line-height: 1.5 !important;
|
|
|
+}
|
|
|
+.line-h-lg {
|
|
|
+ line-height: 2 !important;
|
|
|
+}
|
|
|
+.line-h-big {
|
|
|
+ line-height: 3 !important;
|
|
|
+}
|
|
|
+.text-center {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.text-left {
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.text-right {
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+/*标题颜色*/
|
|
|
+.text-primary {
|
|
|
+ color: #317Afd !important;
|
|
|
+}
|
|
|
+.text-secondary {
|
|
|
+ color: #00b368 !important;
|
|
|
+}
|
|
|
+.text-danger {
|
|
|
+ color: #dc3545 !important;
|
|
|
+}
|
|
|
+.text-warning {
|
|
|
+ color: #ffc107 !important;
|
|
|
+}
|
|
|
+.text-title {
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+.text-info {
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+.text-grey {
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+.text-sub {
|
|
|
+ color: #cccccc;
|
|
|
+}
|
|
|
+.text-disable {
|
|
|
+ color: #c0c0c0;
|
|
|
+}
|
|
|
+.text-white {
|
|
|
+ color: #fff !important;
|
|
|
+}
|
|
|
+/*布局*/
|
|
|
+.nowrap {
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+.flex-1 {
|
|
|
+ flex: 1;
|
|
|
+}
|
|
|
+.flex-2 {
|
|
|
+ flex: 2;
|
|
|
+}
|
|
|
+.wrap {
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.d-flex {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+.d-block {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
+.d-inline-block {
|
|
|
+ display: inline-block;
|
|
|
+}
|
|
|
+.row {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+.row-center {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.row-end {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+.row-between {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.between {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.row-around {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.column {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.column-center {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+.column-around {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+.column-end {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+.column-between {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+.relative {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+/* 超出隐藏 */
|
|
|
+.text-ellipsis {
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.text-ellipsis2 {
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.mt-12 {
|
|
|
+ margin-top: 24rpx !important;
|
|
|
+}
|
|
|
+.mr {
|
|
|
+ margin-right: 18rpx !important;
|
|
|
+}
|
|
|
+.mb {
|
|
|
+ margin-bottom: 24rpx !important;
|
|
|
+}
|
|
|
+.m-12 {
|
|
|
+ margin: 24rpx;
|
|
|
+}
|
|
|
+.p-10 {
|
|
|
+ padding: 20rpx;
|
|
|
+}
|
|
|
+.p-12 {
|
|
|
+ padding: 24rpx;
|
|
|
+}
|
|
|
+.px-12 {
|
|
|
+ padding: 26rpx 24rpx;
|
|
|
+}
|
|
|
+.px-13 {
|
|
|
+ padding: 24rpx 26rpx;
|
|
|
+}
|
|
|
+/*按钮*/
|
|
|
+.btn,
|
|
|
+.btn-plain {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 96rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ line-height: 1;
|
|
|
+ border-radius: 12rpx;
|
|
|
+}
|
|
|
+.btn::after,
|
|
|
+.btn-plain::after {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.btn {
|
|
|
+ color: #fff;
|
|
|
+ background-image: linear-gradient(45deg, #57b1fe, #317afd);
|
|
|
+}
|
|
|
+.btn-plain {
|
|
|
+ color: #317afd;
|
|
|
+ border: 1rpx #317afd solid;
|
|
|
+}
|
|
|
+.scroll-h {
|
|
|
+ white-space: nowrap;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+.ui-card {
|
|
|
+ margin: 24rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 12rpx;
|
|
|
+}
|
|
|
+.ui-upload {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: flex-start;
|
|
|
+}
|
|
|
+.ui-upload_text {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 20rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+}
|
|
|
+.ui-upload_img {
|
|
|
+ display: block;
|
|
|
+ width: 128rpx;
|
|
|
+ height: 128rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+}
|
|
|
+.ui-upload_file,
|
|
|
+.ui-upload_input {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ width: 128rpx;
|
|
|
+ margin: 0 16rpx 16rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+}
|
|
|
+.picker {
|
|
|
+ width: 240rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ border: #DDDDDD 1rpx solid;
|
|
|
+ border-radius: 8rpx;
|
|
|
+}
|
|
|
+.picker-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 60rpx;
|
|
|
+ padding: 0 24rpx;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 1;
|
|
|
+}
|
|
|
+/**
|
|
|
+ * ===================
|
|
|
+ * 页面面板通用样式 用于 监控列表,可视监控,病虫害百科列表,病虫害详情,病虫害识别
|
|
|
+ * ===================
|
|
|
+ */
|
|
|
+.page-panel {
|
|
|
+ padding: 24rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ margin-bottom: 100rpx;
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+/**
|
|
|
+ * ===================
|
|
|
+ * 设计监测列表项通用样式 用于 气象监测列表,虫情监测列表页面
|
|
|
+ * ===================
|
|
|
+ */
|
|
|
+.forecast-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 26rpx 24rpx 34rpx;
|
|
|
+}
|
|
|
+.forecast-item .title {
|
|
|
+ position: relative;
|
|
|
+ color: #333;
|
|
|
+ line-height: 44rpx;
|
|
|
+}
|
|
|
+.forecast-item .title::before {
|
|
|
+ content: ' ';
|
|
|
+ display: inline-block;
|
|
|
+ width: 18rpx;
|
|
|
+ height: 18rpx;
|
|
|
+ margin-right: 18rpx;
|
|
|
+ border-radius: 100%;
|
|
|
+}
|
|
|
+.forecast-item .title.on::before {
|
|
|
+ background: linear-gradient(135deg, #57B1FE 0%, #317afd 100%);
|
|
|
+}
|
|
|
+.forecast-item .title.off::before {
|
|
|
+ background: #e93f27;
|
|
|
+}
|
|
|
+.forecast-item .text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666;
|
|
|
+ line-height: 40rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+}
|
|
|
+/**
|
|
|
+ * ===================
|
|
|
+ * 设备监测详情卡片样式 气象监测详情,虫情监测详情页面
|
|
|
+ * ===================
|
|
|
+ */
|
|
|
+.forecast-card {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ overflow: hidden;
|
|
|
+ padding: 28rpx 26rpx;
|
|
|
+ margin-bottom: 48rpx;
|
|
|
+ color: #fff;
|
|
|
+ background: linear-gradient(135deg, #57B1FE 0%, #317AFD 100%);
|
|
|
+}
|
|
|
+.forecast-card::before, .forecast-card::after {
|
|
|
+ content: ' ';
|
|
|
+ position: absolute;
|
|
|
+ display: block;
|
|
|
+ background: rgba(255, 255, 255, 0.3);
|
|
|
+ border-radius: 100%;
|
|
|
+}
|
|
|
+.forecast-card::before {
|
|
|
+ top: 12rpx;
|
|
|
+ right: 96rpx;
|
|
|
+ width: 92rpx;
|
|
|
+ height: 92rpx;
|
|
|
+}
|
|
|
+.forecast-card::after {
|
|
|
+ right: -96rpx;
|
|
|
+ bottom: -108rpx;
|
|
|
+ width: 276rpx;
|
|
|
+ height: 276rpx;
|
|
|
+}
|
|
|
+.forecast-card .title {
|
|
|
+ position: relative;
|
|
|
+ line-height: 44rpx;
|
|
|
+}
|
|
|
+.forecast-card .title::before {
|
|
|
+ content: ' ';
|
|
|
+ display: inline-block;
|
|
|
+ width: 18rpx;
|
|
|
+ height: 18rpx;
|
|
|
+ margin-right: 18rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 100%;
|
|
|
+}
|
|
|
+.forecast-card .text {
|
|
|
+ margin-top: 14rpx;
|
|
|
+ font: 28rpx/40rpx PingFang SC-中等, PingFang SC;
|
|
|
+ line-height: 40rpx;
|
|
|
+}
|
|
|
+.forecast-card .state {
|
|
|
+ padding-top: 6rpx;
|
|
|
+ text-align: right;
|
|
|
+ width: 120rpx;
|
|
|
+}
|
|
|
+/**
|
|
|
+ * ===================
|
|
|
+ * 实时数据列表样式;使用模块:气象监测,虫情监测
|
|
|
+ * ===================
|
|
|
+ */
|
|
|
+.latest-list {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.latest-item {
|
|
|
+ display: flex;
|
|
|
+ width: calc(50% - 34rpx);
|
|
|
+ padding: 26rpx 24rpx;
|
|
|
+ margin-top: 0;
|
|
|
+ margin-right: 0;
|
|
|
+}
|
|
|
+.latest-item:nth-child(2n) {
|
|
|
+ margin-left: 18rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+}
|
|
|
+.latest-item .icon {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 88rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ margin-right: 24rpx;
|
|
|
+ background: #317afd;
|
|
|
+ border-radius: 100%;
|
|
|
+}
|
|
|
+.latest-item .icon image {
|
|
|
+ display: block;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+}
|
|
|
+.latest-item .text {
|
|
|
+ line-height: 34rpx;
|
|
|
+}
|
|
|
+/**
|
|
|
+ * ===================
|
|
|
+ * 表格数据列表样式
|
|
|
+ * ===================
|
|
|
+ */
|
|
|
+.table-style {
|
|
|
+ margin-bottom: 42rpx;
|
|
|
+}
|
|
|
+.table-style .uni-table-th,
|
|
|
+.table-style .uni-table-td {
|
|
|
+ color: #333333 !important;
|
|
|
+ font-weight: normal !important;
|
|
|
+ font-size: 24rpx !important;
|
|
|
+ line-height: 34rpx !important;
|
|
|
+ text-align: center !important;
|
|
|
+}
|
|
|
+.table-style .uni-table-th {
|
|
|
+ background-color: #F9F9F9 !important;
|
|
|
+ padding: 16rpx 20rpx !important;
|
|
|
+}
|
|
|
+.table-style .uni-table-td {
|
|
|
+ padding: 12rpx 20rpx;
|
|
|
+}
|
|
|
+
|