style

packageA/pages/post/component/radarMap.vue

@@ -1,5 +1,5 @@
 <template>
-    <view style="display: flex; justify-content: center; padding: 0px 0">
+    <view class="radar" style="display: flex; justify-content: center; padding: 0px 0">
         <canvas canvas-id="radarCanvas" id="radarCanvas" style="width: 300px; height: 250px"></canvas>
     </view>
 </template>
@@ -41,6 +41,8 @@ watch(
 );
 
 function rawRadarChart(labels, data) {
+    let ratio = window.innerWidth / 600;
+    if (ratio < 1) ratio = 1;
     const ctx = uni.createCanvasContext('radarCanvas');
     const width = 80;
     const height = 80;
@@ -136,8 +138,8 @@ function rawRadarChart(labels, data) {
 
         //标题
         ctx.setFillStyle('#000');
-        ctx.setFontSize(12);
-        ctx.font = 'bold 12px sans-serif';
+        ctx.setFontSize(12 * ratio);
+        ctx.font = `bold ${12 * ratio}px sans-serif`;
         ctx.fillText(label, x, y);
     });
 
@@ -145,4 +147,10 @@ function rawRadarChart(labels, data) {
 }
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+@media (min-width: 800px) {
+    .radar{
+        padding-top: 30rpx !important;
+    }
+}
+</style>