uview-plus 3.7.36 → 3.8.32

package/components/u-calendar/u-calendar.vue

@@ -15,8 +15,18 @@
 				:showSubtitle="showSubtitle"
 				:showTitle="showTitle"
 				:weekText="weekText"
+				:showSwitch="monthSwitch"
+				:prevDisabled="switchPrevDisabled"
+				:nextDisabled="switchNextDisabled"
+				:prevYearDisabled="switchPrevYearDisabled"
+				:nextYearDisabled="switchNextYearDisabled"
+				@prev="prevMonth"
+				@next="nextMonth"
+				@prevYear="prevYear"
+				@nextYear="nextYear"
 			></uHeader>
 			<scroll-view
+				v-if="!monthSwitch"
 				:style="{
                     height: addUnit(listHeight, 'px')
                 }"
@@ -48,9 +58,41 @@
 					:monthFormat="monthFormat"
 					ref="month"
 					@monthSelected="monthSelected"
-					@updateMonthTop="updateMonthTop"
+					@updateMonthTop="onUpdateMonthTop"
 				></uMonth>
 			</scroll-view>
+			<view
+				v-else
+				:style="{
+                    height: addUnit(listHeight, 'px')
+                }"
+			>
+				<uMonth
+					:color="color"
+					:rowHeight="rowHeight"
+					:showMark="showMark"
+					:months="currentMonths"
+					:mode="mode"
+					:maxCount="maxCount"
+					:startText="startText"
+					:endText="endText"
+					:defaultDate="defaultDate"
+					:minDate="innerMinDate"
+					:maxDate="innerMaxDate"
+					:maxMonth="monthNum"
+					:readonly="readonly"
+					:maxRange="maxRange"
+					:rangePrompt="rangePrompt"
+					:showRangePrompt="showRangePrompt"
+					:allowSameDay="allowSameDay"
+					:forbidDays="forbidDays"
+					:forbidDaysToast="forbidDaysToast"
+					:monthFormat="monthFormat"
+					ref="month"
+					@monthSelected="monthSelected"
+					@updateMonthTop="onUpdateMonthTop"
+				></uMonth>
+			</view>
 			<slot name="footer" v-if="showConfirm">
 				<view class="u-calendar__confirm">
 					<u-button
@@ -111,6 +153,7 @@ import test from '../../libs/function/test';
  * @property {Boolean}				allowSameDay	    是否允许日期范围的起止时间为同一天，mode = range时有效 (默认 false )
  * @property {Number|String}	    round				圆角值，默认无圆角  (默认 0 )
  * @property {Number|String}	    monthNum			最多展示的月份数量  (默认 3 )
+ * @property {Boolean}	            monthSwitch			是否启用非滚动的单月切换模式  (默认 false )
  * @property {Array}	            weekText			星期文案  (默认 ['一', '二', '三', '四', '五', '六', '日'] )
  *
  * @event {Function()} confirm 		点击确定按钮时触发		选择日期相关的返回参数
@@ -197,6 +240,24 @@ export default {
 				return ''
 			}
 		},
+		currentMonths() {
+			if (this.monthSwitch && this.months.length) {
+				return [this.months[this.monthIndex]]
+			}
+			return this.months
+		},
+		switchPrevDisabled() {
+			return this.monthIndex <= 0
+		},
+		switchNextDisabled() {
+			return this.monthIndex >= this.months.length - 1
+		},
+		switchPrevYearDisabled() {
+			return this.monthIndex - 12 < 0
+		},
+		switchNextYearDisabled() {
+			return this.monthIndex + 12 > this.months.length - 1
+		},
 		buttonDisabled() {
 			// 如果为range类型，且选择的日期个数不足1个时，让底部的按钮出于disabled状态
 			if (this.mode === 'range') {
@@ -256,7 +317,7 @@ export default {
 			} else {
 				bottomPadding = 30
 			}
-			this.listHeight = this.rowHeight * 5 + bottomPadding
+			this.listHeight = this.rowHeight * (this.monthSwitch ? 6 : 5) + bottomPadding
 			this.setMonth()
 		},
 		close() {
@@ -350,6 +411,43 @@ export default {
 					year: dayjs(minDate).add(i, 'month').year()
 				})
 			}
+			if (this.monthSwitch) {
+				this.monthIndex = this.getDefaultMonthIndex()
+			}
+		},
+		getDefaultMonthIndex() {
+			let selected = dayjs().format('YYYY-MM')
+			if (this.defaultDate) {
+				if (!test.array(this.defaultDate)) {
+					selected = dayjs(this.defaultDate).format('YYYY-MM')
+				} else if (this.defaultDate.length) {
+					selected = dayjs(this.defaultDate[0]).format('YYYY-MM')
+				}
+			}
+			const index = this.months.findIndex(({ year, month }) => {
+				return `${year}-${padZero(month)}` === selected
+			})
+			return index === -1 ? 0 : index
+		},
+		prevMonth() {
+			if (!this.switchPrevDisabled) {
+				this.monthIndex -= 1
+			}
+		},
+		nextMonth() {
+			if (!this.switchNextDisabled) {
+				this.monthIndex += 1
+			}
+		},
+		prevYear() {
+			if (!this.switchPrevYearDisabled) {
+				this.monthIndex -= 12
+			}
+		},
+		nextYear() {
+			if (!this.switchNextYearDisabled) {
+				this.monthIndex += 12
+			}
 		},
 		// 滚动到默认设置的月份
 		scrollIntoDefaultMonth(selected) {
@@ -386,6 +484,12 @@ export default {
 			}
 		},
 		// 更新月份的top值
+		onUpdateMonthTop(topArr = []) {
+			if (this.monthSwitch) {
+				return
+			}
+			this.updateMonthTop(topArr)
+		},
 		updateMonthTop(topArr = []) {
 			// 设置对应月份的top值，用于onScroll方法更新月份
 			topArr.map((item, index) => {
@@ -414,6 +518,9 @@ export default {
 
 <style lang="scss" scoped>
 .u-calendar {
+	color: var(--up-main-color, $u-main-color);
+	background-color: var(--up-card-bg-color, #ffffff);
+
 	&__confirm {
 		padding: 7px 18px;
 	}

package/components/u-car-keyboard/u-car-keyboard.vue

@@ -59,7 +59,7 @@
 					<up-icon
 						size="28"
 						name="backspace"
-						color="#303133"
+						:color="upThemeVar('--up-main-color', '#303133')"
 					></up-icon>
 				</view>
 			</view>
@@ -222,25 +222,25 @@
 </script>
 
 <style lang="scss" scoped>
-	$u-car-keyboard-background-color: rgb(224, 228, 230) !default;
+	$u-car-keyboard-background-color: var(--up-bg-color, rgb(224, 228, 230)) !default;
 	$u-car-keyboard-padding:6px 0 6px !default;
 	$u-car-keyboard-button-inner-width:64rpx !default;
-	$u-car-keyboard-button-inner-background-color:#FFFFFF !default;
+	$u-car-keyboard-button-inner-background-color:var(--up-card-bg-color, #ffffff) !default;
 	$u-car-keyboard-button-height:80rpx !default;
 	$u-car-keyboard-button-inner-box-shadow:0 1px 0px #999992 !default;
 	$u-car-keyboard-button-border-radius:4px !default;
 	$u-car-keyboard-button-inner-margin:8rpx 5rpx !default;
 	$u-car-keyboard-button-text-font-size:16px !default;
-	$u-car-keyboard-button-text-color:$u-main-color !default;
+	$u-car-keyboard-button-text-color:var(--up-main-color, #303133) !default;
 	$u-car-keyboard-center-inner-margin: 0 4rpx !default;
 	$u-car-keyboard-special-button-width:134rpx !default;
 	$u-car-keyboard-lang-font-size:16px !default;
-	$u-car-keyboard-lang-color:$u-main-color !default;
+	$u-car-keyboard-lang-color:var(--up-main-color, #303133) !default;
 	$u-car-keyboard-active-color:$u-primary !default;
 	$u-car-keyboard-line-font-size:15px !default;
-	$u-car-keyboard-line-color:$u-main-color !default;
+	$u-car-keyboard-line-color:var(--up-main-color, #303133) !default;
 	$u-car-keyboard-line-margin:0 1px !default;
-	$u-car-keyboard-u-hover-class-background-color:#BBBCC6 !default;
+	$u-car-keyboard-u-hover-class-background-color:var(--up-border-color, #BBBCC6) !default;
 
 	.u-keyboard {
 		@include flex(column);

package/components/u-card/u-card.vue

@@ -136,12 +136,12 @@
 </script>
 
 <style lang="scss" scoped>
-.u-card {
-	position: relative;
-	overflow: hidden;
-	font-size: 28rpx;
-	background-color: #ffffff;
-	box-sizing: border-box;
+.u-card {
+	position: relative;
+	overflow: hidden;
+	font-size: 28rpx;
+	background-color: var(--up-card-bg-color, #ffffff);
+	box-sizing: border-box;
 	
 	&-full {
 		// 如果是与屏幕之间不留空隙，应该设置左右边距为0

package/components/u-cascader/u-cascader.vue

@@ -1,7 +1,7 @@
 <template>
 	<up-popup :show="popupShow" mode="bottom" :popup="false"
 		:mask="true" :closeable="closeable" :safe-area-inset-bottom="true"
-		close-icon-color="#ffffff" :z-index="uZIndex"
+		:close-icon-color="closeIconColor" :z-index="uZIndex"
 		:maskCloseAble="maskCloseAble" @close="close">
 		<view class="up-p-t-30 up-p-l-20 up-m-b-10" v-if="headerDirection ==='column'">
 			<up-steps v-if="popupShow" dot direction="column" v-model:current="tabsIndex">
@@ -21,7 +21,7 @@
 				<template v-for="(levelData, levelIndex) in levelList" :key="levelIndex">
 					<view v-if="optionsCols == 2 || levelIndex == tabsIndex" class="area-item"
 						:style="{ width: optionsCols == 2 ? '33.33333%' : '750rpx'}">
-						<view class="u-padding-10 u-bg-gray" style="height: 100%;">
+						<view class="u-padding-10" :style="[levelPaneStyle, { height: '100%' }]">
 							<scroll-view :scroll-y="true" style="height: 100%">
 								<up-cell-group v-if="levelIndex === 0 || selectedValueIndexs[levelIndex - 1] !== undefined">
 									<up-cell v-for="(item,index) in levelData"
@@ -199,12 +199,30 @@
 			uZIndex() {
 				// 如果用户有传递z-index值，优先使用
 				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+			},
+			closeIconColor() {
+				return 'var(--up-main-color, #303133)';
+			},
+			levelPaneStyle() {
+				return {
+					backgroundColor: 'var(--up-bg-color, #f7f7f7)'
+				};
 			}
 		},
 		// 新增confirm事件
 		emits: ['update:modelValue', 'update:show', 'change', 'confirm', 'cancel'],
 		methods: {
 			t,
+			getSelectedValues() {
+				const result = [];
+				for (let i = 0; i < this.selectedValueIndexs.length; i++) {
+					const selectedIndex = this.selectedValueIndexs[i];
+					if (selectedIndex === undefined) continue;
+					if (!this.levelList[i] || !this.levelList[i][selectedIndex]) continue;
+					result.push(this.levelList[i][selectedIndex][this.valueKey]);
+				}
+				return result;
+			},
 			initLevelList() {
 				// 初始化第一级数据
 				if (this.data && this.data.length > 0) {
@@ -216,7 +234,10 @@
 				// 检查data是否为空
 				if (!this.data || this.data.length == 0) return;
 				// 检查modelValue是否为空
-				if (!this.modelValue || this.modelValue.length == 0) return;
+				if (!this.modelValue || this.modelValue.length == 0) {
+					this.confirmValues = [];
+					return;
+				}
 				// 根据默认值设置选中项
 				// 根据modelValue获取indexs给selectedValueIndexs
 				this.selectedValueIndexs = [];
@@ -242,6 +263,8 @@
 						break;
 					}
 				}
+				// 同步确认值，避免“仅回显未改动时确认返回空数组”
+				this.confirmValues = this.getSelectedValues();
 			},
 			close() {
 				this.$emit('cancel');
@@ -288,12 +311,7 @@
 			// 修改emitChange方法，增加closePopup参数
 			emitChange(closePopup = true) {
 				// 构造选中结果
-				const result = [];
-				for (let i = 0; i < this.selectedValueIndexs.length; i++) {
-					if (this.selectedValueIndexs[i] !== undefined && this.levelList[i]) {
-						result.push(this.levelList[i][this.selectedValueIndexs[i]][this.valueKey]);
-					}
-				}
+				const result = this.getSelectedValues();
 
 				// 更新confirmValues
 				this.confirmValues = [...result];
@@ -310,9 +328,11 @@
 				this.close();
 			},
 			handleConfirm() {
+				const values = this.confirmValues.length ? this.confirmValues : this.getSelectedValues();
+				this.confirmValues = [...values];
 				// 确认时触发confirm事件
-				this.$emit('update:modelValue', this.confirmValues);
-				this.$emit('confirm', this.confirmValues);
+				this.$emit('update:modelValue', values);
+				this.$emit('confirm', values);
 				this.close();
 			},
             // 跳转父节点
@@ -346,6 +366,6 @@
 
 	// 添加按钮区域样式
 	.u-cascader-action {
-		border-top: 1px solid #eee;
+		border-top: 1px solid var(--up-border-color, #eee);
 	}
 </style>

package/components/u-cate-tab/u-cate-tab.vue

@@ -285,13 +285,13 @@
 		overflow: hidden;
 	}
 
-	.u-search-inner {
-		background-color: rgb(234, 234, 234);
-		border-radius: 100rpx;
-		display: flex;
-		align-items: center;
-		padding: 10rpx 16rpx;
-	}
+	.u-search-inner {
+		background-color: var(--up-bg-color, rgb(234, 234, 234));
+		border-radius: 100rpx;
+		display: flex;
+		align-items: center;
+		padding: 10rpx 16rpx;
+	}
 
 	.u-search-text {
 		font-size: 26rpx;
@@ -304,26 +304,26 @@
 		height: 100%;
 	}
 
-	.u-cate-tab__item {
-		height: 110rpx;
-		background: #f6f6f6;
-		box-sizing: border-box;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 26rpx;
-		color: #444;
-		font-weight: 400;
-		line-height: 1;
-	}
-
-	.u-cate-tab__item-active {
-		position: relative;
-		color: #000;
-		font-size: 30rpx;
-		font-weight: 600;
-		background: #fff;
-	}
+	.u-cate-tab__item {
+		height: 110rpx;
+		background: var(--up-bg-color, #f6f6f6);
+		box-sizing: border-box;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 26rpx;
+		color: var(--up-content-color, #444);
+		font-weight: 400;
+		line-height: 1;
+	}
+
+	.u-cate-tab__item-active {
+		position: relative;
+		color: var(--up-main-color, #000);
+		font-size: 30rpx;
+		font-weight: 600;
+		background: var(--up-card-bg-color, #fff);
+	}
 
 	.u-cate-tab__item-active::before {
 		content: "";
@@ -338,37 +338,38 @@
 		height: 100%;
 	}
 
-	.u-cate-tab__right-box {
-		flex: 1;
-		background-color: rgb(250, 250, 250);
-	}
+	.u-cate-tab__right-box {
+		flex: 1;
+		background-color: var(--up-page-bg-color, var(--up-bg-color, rgb(250, 250, 250)));
+	}
 
 	.u-cate-tab__page-view {
 		padding: 16rpx;
 	}
 
-	.u-cate-tab__page-item {
-		margin-bottom: 30rpx;
-		background-color: #fff;
-		padding: 16rpx;
-		border-radius: 8rpx;
-	}
+	.u-cate-tab__page-item {
+		margin-bottom: 30rpx;
+		background-color: var(--up-card-bg-color, #fff);
+		border: 1px solid var(--up-border-color, #e5e7eb);
+		padding: 16rpx;
+		border-radius: 8rpx;
+	}
 
 	.u-cate-tab__page-item:last-child {
 		min-height: 100vh;
 	}
 
-	.item-title {
-		font-size: 26rpx;
-		color: $u-main-color;
-		font-weight: bold;
-	}
-
-	.item-menu-name {
-		font-weight: normal;
-		font-size: 24rpx;
-		color: $u-main-color;
-	}
+	.item-title {
+		font-size: 26rpx;
+		color: var(--up-main-color, $u-main-color);
+		font-weight: bold;
+	}
+
+	.item-menu-name {
+		font-weight: normal;
+		font-size: 24rpx;
+		color: var(--up-main-color, $u-main-color);
+	}
 
 	.item-container {
 		display: flex;

package/components/u-cell/u-cell.vue

@@ -15,23 +15,25 @@
                     <!-- 将slot与默认内容用if/else分开主要是因为微信小程序不支持slot嵌套传递，这样才能解决collapse组件的slot不失效问题，label暂时未用到。 -->
 					<slot name="title" v-if="$slots.title || !title">
 					</slot>
-                    <text v-else class="u-cell__title-text" :style="[titleTextStyle]"
+                    <text v-else class="u-cell__title-text" :style="[titleTextStyle, cellTitleDynamicStyle]"
                         :class="[required && 'u-cell--required', disabled && 'u-cell--disabled', size === 'large' && 'u-cell__title-text--large']">{{ title }}</text>
 					<slot name="label">
 						<text class="u-cell__label" v-if="label"
+							:style="[cellLabelDynamicStyle]"
 							:class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__label--large']">{{ label }}</text>
 					</slot>
 				</view>
 			</view>
 			<slot name="value">
 				<text class="u-cell__value"
+					:style="[cellValueDynamicStyle]"
 					:class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__value--large']"
 					v-if="!testEmpty(value)">{{ value }}</text>
 			</slot>
 			<view class="u-cell__right-icon-wrap" v-if="$slots['right-icon'] || isLink"
 				:class="[`u-cell__right-icon-wrap--${arrowDirection}`]">
 				<up-icon v-if="rightIcon && !$slots['right-icon']" :name="rightIcon"
-					:custom-style="rightIconStyle" :color="disabled ? '#c8c9cc' : 'info'"
+					:custom-style="rightIconStyle" :color="disabled ? cellDisabledColor : 'info'"
 					:size="size === 'large' ? 18 : 16"></up-icon>
 				<slot v-else name="right-icon">
 				</slot>
@@ -91,6 +93,24 @@
 		computed: {
 			titleTextStyle() {
 				return addStyle(this.titleStyle)
+			},
+			cellDisabledColor() {
+				return this.upThemeVar('--up-disabled-color', '#c8c9cc')
+			},
+			cellTitleDynamicStyle() {
+				return {
+					color: this.upThemeVar('--up-main-color', '#303133')
+				}
+			},
+			cellLabelDynamicStyle() {
+				return {
+					color: this.upThemeVar('--up-tips-color', '#909399')
+				}
+			},
+			cellValueDynamicStyle() {
+				return {
+					color: this.upThemeVar('--up-content-color', '#606266')
+				}
 			}
 		},
 		emits: ['click'],
@@ -127,8 +147,8 @@
 	$u-cell-label-line-height: 18px !default;
 	$u-cell-value-font-size: 14px !default;
 	$u-cell-value-color: $u-content-color !default;
-	$u-cell-clickable-color: $u-bg-color !default;
-	$u-cell-disabled-color: #c8c9cc !default;
+	$u-cell-clickable-color: var(--up-hover-bg-color, #f1f1f1) !default;
+	$u-cell-disabled-color: $u-disabled-color !default;
 	$u-cell-padding-top-large: 13px !default;
 	$u-cell-padding-bottom-large: 13px !default;
 	$u-cell-value-font-size-large: 15px !default;

package/components/u-cell-group/u-cell-group.vue

@@ -1,8 +1,8 @@
 <template>
-    <view :style="[addStyle(customStyle)]" :class="[customClass]" class="u-cell-group">
+    <view :style="[groupStyle, addStyle(customStyle)]" :class="[customClass]" class="u-cell-group">
         <view v-if="title" class="u-cell-group__title">
             <slot name="title">
-				<text class="u-cell-group__title__text">{{ title }}</text>
+				<text class="u-cell-group__title__text" :style="{ color: upThemeVar('--up-main-color', '#303133') }">{{ title }}</text>
 			</slot>
         </view>
         <view class="u-cell-group__wrapper">
@@ -32,6 +32,14 @@
 	export default {
 		name: 'u-cell-group',
 		mixins: [mpMixin, mixin, props],
+		computed: {
+			groupStyle() {
+				const fallbackBg = this.upThemeIsDark ? '#1c1c1e' : '#ffffff'
+				return {
+					backgroundColor: this.upThemeVar('--up-card-bg-color', fallbackBg)
+				}
+			}
+		},
 		methods: {
 			addStyle
 		}
@@ -63,4 +71,3 @@
 		}
     }
 </style>
-

package/components/u-checkbox/u-checkbox.vue

@@ -111,16 +111,16 @@
 			},
 			// 组件选中激活时的颜色
 			elActiveColor() {
-				return this.activeColor ? this.activeColor : (this.parentData.activeColor ? this.parentData.activeColor : '#2979ff');
+				return this.activeColor ? this.activeColor : (this.parentData.activeColor ? this.parentData.activeColor : this.upThemeVar('--up-primary', '#2979ff'));
 			},
 			// 组件选未中激活时的颜色
 			elInactiveColor() {
 				return this.inactiveColor ? this.inactiveColor : (this.parentData.inactiveColor ? this.parentData.inactiveColor :
-					'#c8c9cc');
+					this.upThemeVar('--up-border-color', '#c8c9cc'));
 			},
 			// label的颜色
 			elLabelColor() {
-				return this.labelColor ? this.labelColor : (this.parentData.labelColor ? this.parentData.labelColor : '#606266')
+				return this.labelColor ? this.labelColor : (this.parentData.labelColor ? this.parentData.labelColor : this.upThemeVar('--up-content-color', '#606266'))
 			},
 			// 组件的形状
 			elShape() {
@@ -133,7 +133,7 @@
 			},
 			elIconColor() {
 				const iconColor = this.iconColor ? this.iconColor : (this.parentData.iconColor ? this.parentData.iconColor :
-					'#ffffff');
+					this.upThemeVar('--up-card-bg-color', '#ffffff'));
 				// 图标的颜色
 				if (this.elDisabled) {
 					// disabled状态下，已勾选的checkbox图标改为elInactiveColor
@@ -161,7 +161,7 @@
 			iconWrapStyle() {
 				// checkbox的整体样式
 				const style = {}
-				style.backgroundColor = this.isChecked && !this.elDisabled ? this.elActiveColor : '#ffffff'
+				style.backgroundColor = this.isChecked && !this.elDisabled ? this.elActiveColor : this.upThemeVar('--up-card-bg-color', '#ffffff')
 				style.borderColor = this.isChecked && !this.elDisabled ? this.elActiveColor : this.elInactiveColor
 				style.width = addUnit(this.elSize)
 				style.height = addUnit(this.elSize)
@@ -294,7 +294,7 @@
 	$u-checkbox-icon-wrap-checked-color:#fff !default;
 	$u-checkbox-icon-wrap-checked-background-color:red !default;
 	$u-checkbox-icon-wrap-checked-border-color:#2979ff !default;
-	$u-checkbox-icon-wrap-disabled-background-color:#ebedf0 !default;
+	$u-checkbox-icon-wrap-disabled-background-color:var(--up-bg-color, #ebedf0) !default;
 	$u-checkbox-icon-wrap-disabled-checked-color:#c8c9cc !default;
 	$u-checkbox-label-margin-left:5px !default;
 	$u-checkbox-label-margin-right:12px !default;

package/components/u-choose/u-choose.vue

@@ -91,9 +91,14 @@
 				currentIndex: ''
 	        }
 	    },
-	    created: function () {
-			this.currentIndex = this.modelValue;
-	    },
+		watch: {
+			modelValue: {
+				immediate: true,
+				handler(newVal) {
+					this.currentIndex = newVal
+				}
+			}
+		},
         emits: ['update:modelValue', 'custom-click'],
 	    methods: {
 	        change(index){
@@ -106,4 +111,4 @@
 			}
 	    }
 	}
-</script>
+</script>

package/components/u-city-locate/u-city-locate.vue

@@ -139,25 +139,31 @@
 	}
 </script>
 
-<style lang="scss">
-	.list__item {
-		padding: 8px 1px;
-	}
-	.u-current-city-title {
-		color: grey;
-		margin-bottom: 5px;
-	}
-	.u-current-city-item {
-		height: 30px;
-	}
-	.hot-city-list {
-		display: flex !important;
-		flex-direction: row !important;
-		padding: 12px 0;
-		.hot-city-item {
-			padding: 6px 12px;
-			margin: 5px;
-			border: 1px solid #ededed;
-		}
-	}
-</style>
+<style lang="scss">
+	.list__item {
+		padding: 8px 1px;
+	}
+	.u-current-city-title {
+		color: var(--up-tips-color, #909399);
+		margin-bottom: 5px;
+	}
+	.u-location-city,
+	.list__item__city-name {
+		color: var(--up-main-color, #303133);
+	}
+	.u-current-city-item {
+		height: 30px;
+	}
+	.hot-city-list {
+		display: flex !important;
+		flex-direction: row !important;
+		padding: 12px 0;
+		.hot-city-item {
+			padding: 6px 12px;
+			margin: 5px;
+			color: var(--up-main-color, #303133);
+			border: 1px solid var(--up-border-color, #ededed);
+			background-color: var(--up-card-bg-color, #ffffff);
+		}
+	}
+</style>