rem基准为1080

src/assets/icons/Vector.svg

@@ -0,0 +1,3 @@
+<svg width="34" height="30" viewBox="0 0 34 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.16663 10.0415C1.16666 8.2796 1.70115 6.55912 2.6995 5.10733C3.69786 3.65554 5.11311 2.54074 6.75834 1.91016C8.40357 1.27958 10.2014 1.1629 11.9143 1.57551C13.6272 1.98813 15.1747 2.91064 16.3524 4.22119C16.4353 4.30988 16.5356 4.38059 16.647 4.42893C16.7584 4.47727 16.8785 4.50221 17 4.50221C17.1214 4.50221 17.2415 4.47727 17.3529 4.42893C17.4643 4.38059 17.5646 4.30988 17.6475 4.22119C18.8215 2.90212 20.3693 1.97186 22.085 1.55423C23.8008 1.1366 25.603 1.25141 27.2518 1.88338C28.9007 2.51534 30.318 3.63449 31.3151 5.09187C32.3121 6.54925 32.8417 8.27573 32.8333 10.0415C32.8333 13.6674 30.4583 16.3749 28.0833 18.7499L19.3876 27.1621C19.0926 27.501 18.7288 27.7731 18.3205 27.9606C17.9122 28.148 17.4687 28.2465 17.0194 28.2493C16.5701 28.2521 16.1254 28.1594 15.7147 27.9771C15.3041 27.7948 14.9369 27.5273 14.6376 27.1922L5.91663 18.7499C3.54163 16.3749 1.16663 13.6832 1.16663 10.0415Z" stroke="#989898" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/main.ts

@@ -7,6 +7,7 @@ import store from './stores/index'
 import 'normalize.css/normalize.css'
 import './assets/css/style.css'
 import SvgIcon from "@/components/SvgIcon/index.vue";
+import "virtual:svg-icons-register";
 
 
 import flexible from "./utils/flexible.js";
@@ -28,9 +29,9 @@ document.addEventListener('touchend', function(event) {
 const app = createApp(App)
 // app.use(ElementPlus)
 app.use(router)
-app.use(store)
-app.component("SvgIcon", SvgIcon)
+.use(store)
+.component("SvgIcon", SvgIcon)
+.mount('#app')
 
 flexible();
 
-app.mount('#app')

src/router/index.ts

@@ -17,6 +17,12 @@ const router = createRouter({
 			// 	name: 'activitiesWorkshop',
 			// 	redirect: "/activities/workshop",	
 			// },
+
+			{
+				path: '/workshop/selectStyle',
+				name: 'SelectStyle',
+				component: () => import('../views/Workshop/selectStyle.vue'),
+			},
 			
 			
 		]

src/utils/flexible.js

@@ -2,7 +2,7 @@ import { getUniversalZoomLevel } from '@/utils/tools'
 
 let flexible = (designWidth, maxWidth,minWidth) =>{
     var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid;
-    designWidth = designWidth || 1920;
+    designWidth = designWidth || 1080;
     // maxWidth = maxWidth || 1920;
     // minWidth = minWidth || 500;
     // minWidth = minWidth || 1024;
@@ -13,11 +13,12 @@ let flexible = (designWidth, maxWidth,minWidth) =>{
 		height = getUniversalZoomLevel() * height
 		// width > maxWidth && (width = maxWidth);
         // width < minWidth && (width = minWidth);
-		if(width >= 1024){
-			designWidth = 1920
-		}else{
-			designWidth = 375
-		}
+
+		// if(width >= 1024){
+		// 	designWidth = 1920
+		// }else{
+		// 	designWidth = 375
+		// }
         var rem = Math.round(width * 10 / designWidth);
 		docEl.style.fontSize = rem+'px'
         remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';

src/views/Workshop/selectStyle.vue

@@ -16,6 +16,7 @@ const {} = toRefs(data);
 <template>
 	<div class="selectStyle">
 		<div class="title">
+			<SvgIcon name="Vector" color="red" size="30" />
 			12312
 		</div>
 	</div>