feat(date-picker): [date-picker]Optimize case display and fix style issues

Author: Youyou-smiles

examples/sites/demos/pc/app/date-picker/align-composition-api.vue

@@ -31,6 +31,6 @@ const value = ref('')
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 350px;
+  width: 280px;
 }
 </style>

examples/sites/demos/pc/app/date-picker/align.vue

@@ -39,6 +39,6 @@ export default {
 
 <style scoped>
 .demo-date-picker-wrap {
-  width: 350px;
+  width: 280px;
 }
 </style>

examples/sites/demos/pc/app/date-picker/date-range-composition-api.vue

@@ -39,6 +39,7 @@ const yearValue = ref('')
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
+  width: 360px;
   & > * {
     margin-top: 12px;
   }

examples/sites/demos/pc/app/date-picker/date-range.vue

@@ -47,6 +47,7 @@ export default {
 
 <style scoped lang="less">
 .demo-date-picker-wrap {
+  width: 360px;
   & > * {
     margin-top: 12px;
   }

examples/sites/demos/pc/app/date-picker/events-composition-api.vue

@@ -15,7 +15,7 @@
       </tiny-col>
     </tiny-row>
     <tiny-row>
-      <tiny-col :span="12">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">onPick:</label>
         <tiny-date-picker v-model="valueOnPick" type="daterange" :picker-options="pickerOptions"></tiny-date-picker>
       </tiny-col>

examples/sites/demos/pc/app/date-picker/events.vue

@@ -15,7 +15,7 @@
       </tiny-col>
     </tiny-row>
     <tiny-row>
-      <tiny-col :span="12">
+      <tiny-col :span="6">
         <label class="demo-date-picker-label">onPick:</label>
         <tiny-date-picker v-model="valueOnPick" type="daterange" :picker-options="pickerOptions"></tiny-date-picker>
       </tiny-col>

examples/sites/demos/pc/app/date-picker/now-composition-api.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="width: 400px">
+    <div class="demo-date-picker">
       <div class="title">插槽式：</div>
       <tiny-date-picker v-model="value1" type="datetime">
         <template #now>
@@ -9,7 +9,7 @@
       </tiny-date-picker>
     </div>
 
-    <div style="width: 400px">
+    <div class="demo-date-picker">
       <div class="title">函数式：</div>
       <tiny-date-picker v-model="value2" type="datetime" :now-click="nowClick"> </tiny-date-picker>
     </div>
@@ -37,6 +37,9 @@ const now = () => {
 </script>
 
 <style scoped>
+.demo-date-picker {
+  width: 280px;
+}
 .nowclass {
   display: inline-flex;
   height: 28px;

examples/sites/demos/pc/app/date-picker/now.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div style="width: 400px">
+    <div class="demo-date-picker">
       <div class="title">插槽式：</div>
       <tiny-date-picker v-model="value1" type="datetime">
         <template #now>
@@ -9,7 +9,7 @@
       </tiny-date-picker>
     </div>
 
-    <div style="width: 400px">
+    <div class="demo-date-picker">
       <div class="title">函数式：</div>
       <tiny-date-picker v-model="value2" type="datetime" :now-click="nowClick"> </tiny-date-picker>
     </div>
@@ -45,6 +45,9 @@ export default {
 </script>
 
 <style scoped>
+.demo-date-picker {
+  width: 280px;
+}
 .nowclass {
   display: inline-flex;
   height: 28px;

examples/sites/demos/pc/app/date-picker/timezone-composition-api.vue

@@ -42,3 +42,9 @@ function selectChange(tz) {
   Modal.message({ message: `当前值为 ${tz.tz.name}`, status: 'info' })
 }
 </script>
+
+<style scoped>
+.demo-date-picker-wrap {
+  width: 280px;
+}
+</style>

packages/theme/src/date-table/index.less

@@ -228,7 +228,6 @@
       div {
         margin-left: 4px;
         margin-right: 4px;
-        background-color: var(--tv-DateTable-td-bg-color-range-selected);
       }
 
       span {
@@ -242,6 +241,9 @@
         background-color: var(--tv-DateTable-bg-color-current-select);
       }
     }
+    &.selected.in-range {
+      background-color: var(--tv-DateTable-td-bg-color-range-selected);
+    }
 
     &.week {
       font-size: 80%;