细节优化

components/fs-dropdown-item/fs-dropdown-item.vue

@@ -47,16 +47,18 @@ const handleToggle = () => {
 	flex: 1;
 	width: 100%;
 	height: 80rpx;
-	display: flex;
-	justify-content: center;
-	align-items: center;
 	background-color: #fff;
-	z-index: 100;
-	padding: 0 20rpx;
 	
 	&-title{
 		display: flex;
+		justify-content: center;
 		align-items: center;
+		position: relative;
+		z-index: 100;
+		padding: 0 20rpx;
+		width: 100%;
+		height: 100%;
+		background-color: #fff;
 		
 		.visible{
 			transform: rotate(180deg);

components/fs-icon/fs-icon.vue

@@ -63,9 +63,10 @@ const handleClick = () => {
 @import '../../common/iconfont.css';
 @import './icon.css';
 
-.fsfont{
+.fsfont, .iconfont{
   display: inline-block;
-  vertical-align: middle;
+  vertical-align: middle;
+	line-height: 1;
 }
 </style>
 

components/fs-icon/icon.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "fsfont"; /* Project id 2762084 */
-  src: url('//at.alicdn.com/t/font_2762084_1v3fm9n7u4i.woff2?t=1645005817781') format('woff2'),
-       url('//at.alicdn.com/t/font_2762084_1v3fm9n7u4i.woff?t=1645005817781') format('woff'),
-       url('//at.alicdn.com/t/font_2762084_1v3fm9n7u4i.ttf?t=1645005817781') format('truetype');
+  src: url('//at.alicdn.com/t/font_2762084_inny2mfiip.woff2?t=1645069423835') format('woff2'),
+       url('//at.alicdn.com/t/font_2762084_inny2mfiip.woff?t=1645069423835') format('woff'),
+       url('//at.alicdn.com/t/font_2762084_inny2mfiip.ttf?t=1645069423835') format('truetype');
 }
 
 .fsfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-notice:before {
+  content: "\e7eb";
+}
+
 .icon-close-circle:before {
   content: "\e6d7";
 }
@@ -57,7 +61,7 @@
   content: "\e7a9";
 }
 
-.icon-notice:before {
+.icon-sound:before {
   content: "\e60d";
 }
 
@@ -85,10 +89,6 @@
   content: "\e62a";
 }
 
-.icon-msg:before {
-  content: "\e6cc";
-}
-
 .icon-sort-down:before {
   content: "\e843";
 }
@@ -201,7 +201,7 @@
   content: "\e61e";
 }
 
-.icon-msg-fill:before {
+.icon-notice-fill:before {
   content: "\e659";
 }
 

components/fs-loadmore/fs-loadmore.vue

@@ -2,9 +2,7 @@
 	<view>
 		<slot></slot>
 		<fs-empty v-if="!state.loading && !state.dataList.length"></fs-empty>
-		<template v-else>
-			<fs-divider v-if="!state.hasMore">{{nomore}}</fs-divider>
-		</template>
+		<fs-divider v-if="!state.hasMore">{{nomore}}</fs-divider>
 	</view>
 </template>
 

components/fs-mask/fs-mask.vue

@@ -1,10 +1,17 @@
 <template>
-	<view class="fs-mask" :style="{'zIndex': zIndex}" v-if="modelValue" @click="handleMask"></view>
+	<view
+		class="fs-mask"
+		:class="{'fs-mask-blur': blurable}"
+		:style="{'zIndex': zIndex}" 
+		v-if="modelValue" 
+		@click="handleMask">
+	</view>
 </template>
 
 <script setup>
 const props = defineProps({
 	modelValue: Boolean,
+	blurable: Boolean,
 	zIndex: {
 		type: Number,
 		default: 899
@@ -32,6 +39,9 @@ const handleMask = () => {
 	bottom: var(--window-bottom);
 	left: 0;
 	background-color: rgba(0, 0, 0, 0.5);
-	backdrop-filter: blur(12rpx);
+	
+	&-blur{
+		backdrop-filter: blur(12rpx);
+	}
 }
 </style>

components/fs-modal/fs-modal.vue

@@ -20,10 +20,10 @@
 				</view>
 			</view>
 			<view class="fs-modal-close" v-if="showClose" @click="handleClose">
-				<fs-icon type="icon-error" color="#fff" size="50rpx"></fs-icon>
+				<fs-icon type="icon-close-circle" color="#fff" size="50rpx"></fs-icon>
 			</view>
 		</view>
-		<fs-mask :modelValue="modelValue" @close="handleClose" :maskClickable="maskClickable"></fs-mask>
+		<fs-mask :modelValue="modelValue" @close="handleClose" :maskClickable="maskClickable" :blurable="blurable"></fs-mask>
 	</view>
 </template>
 
@@ -40,6 +40,7 @@ const props = defineProps({
 		type: Boolean,
 		default: true
 	},
+	blurable: Boolean,
 	title: {
 		type: String,
 		default: '提示'
@@ -117,7 +118,6 @@ const handleConfirm = () => {
 		position: fixed;
 		background-color: #fff;
 		z-index: 900;
-		transition: all .2s;
 		top: 50%;
 		left: 50%;
 		transform: translate(-50%, -50%) scale(0);

components/fs-scroll-list/fs-scroll-list.vue

@@ -104,7 +104,7 @@ const handleToLower = () => emits('right')
 		background-color: v-bind(indicatorColor);
 		width: v-bind(indicatorWidth);
 		height: 8rpx;
-		border-radius: 50rpx;
+		border-radius: 50px;
 		overflow: hidden;
 	}
 	&-bar{

components/fs-sidebar/fs-sidebar.vue

@@ -34,6 +34,10 @@ const props = defineProps({
 	titleKey: {
 		type: String,
 		default: 'title'
+	},
+	width: {
+		type: String,
+		default: '210rpx'
 	}
 })
 const emits = defineEmits(['change'])
@@ -54,14 +58,14 @@ const handleClick = (item, index) => {
 	height: 100%;
 	
 	&-left{
-		width: 200rpx;
+		width: v-bind(width);
 		flex-shrink: 0;
 		background-color: #fafafa;
 		overflow: auto;
 	}
 	
 	&-item{
-		padding: 26rpx var(--gutter);
+		padding: 30rpx var(--gutter);
 		position: relative;
 	}
 	&-active{
@@ -73,7 +77,7 @@ const handleClick = (item, index) => {
 			left: 0;
 			top: 0;
 			height: 100%;
-			width: 4rpx;
+			width: 6rpx;
 			background-color: currentColor;
 		}
 	}