chart页圆形picker样式实现

src/assets/style/reset.css

@@ -53,4 +53,8 @@ table {
 button {
   padding: 0;
   cursor: pointer;
+}
+
+html {
+  font-size: 5.4701vw;
 }

src/views/Chart.vue

@@ -2,7 +2,10 @@
   <div class="chart">
     <h1>This is the Chart page</h1>
     <van-picker
+      class="picker"
       :columns="columns"
+      :item-height="pickerItemHeight"
+      visible-item-count="3"
       @confirm="onConfirm"
       @cancel="onCancel"
       @change="onChange"
@@ -20,6 +23,11 @@ export default {
       columns: ['Delaware', 'Florida', 'Georqia', 'Indiana', 'Maine'],
     }
   },
+  computed: {
+    pickerItemHeight() {
+      return 0.12919 * window.innerWidth
+    }
+  },
   methods: {
     onConfirm(value, index) {
       console.log(`Value: ${value}, Index: ${index}`)
@@ -33,3 +41,11 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.picker {
+  width: 7.08rem;
+  border-radius: 50%;
+  background: #33468B;
+}
+</style>