up

sanmu
1 parent 5fb875b5
Showing 10 changed files with 33 additions and 36 deletions
public/home/10 Material testing.svg
public/home/11 Calibration.svg
public/home/8_Electrochemical_performance.svg
src/assets/main.css
src/components/Footer.vue
src/components/Header.vue
src/components/MainTitleList.vue
src/components/MainTitleListOdd.vue
src/main.ts
src/views/Home.vue
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTDSVG1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg t="1687246905469" class="icon" viewBox="-350 100 1900 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5024" xmlns:xlink="http://www.w3.org/1999/xlink" width="190" height="230">
+<svg t="1687246905469" class="icon" viewBox="-350 0 1900 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5024" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
   <path d="M573.286004 173.620761l-1.474964 300.192671-242.744074-143.371499V100.322551h-49.998779v233.644296l-277.343229 157.496154L0 844.479383l303.94258 179.520617 305.892531-173.695759 1.474964-300.192671 242.744074 143.396499v231.794341h49.998779v-235.319255l277.343229-157.496155 1.724958-353.041381L879.178536-0.074998z m-13.299676 647.484192l-255.518761 144.996461-254.318791-150.221333 1.424965-295.31779 255.518762-144.99646 254.318791 150.246332z m571.561046-317.692243l-255.518761 144.99646-254.318791-150.246332 1.424965-295.367789 255.518761-144.99646L1132.97234 208.044921z" p-id="5025" fill="#1296db"></path>
   <path d="M479.063304 575.310954h49.998779v199.995118h-49.998779z" p-id="5026" fill="#1296db"></path>
   <path d="M109.37233 538.936842l167.845902-95.597666 24.749396 43.44894-167.845902 95.622665z" p-id="5027" fill="#1296db"></path>
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTDSVG1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg t="1687246980615" class="icon" viewBox="-700 -500 2200 1700" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6119" xmlns:xlink="http://www.w3.org/1999/xlink" width="220" height="190">
+<svg t="1687246980615" class="icon" viewBox="-700 -350 2200 1700" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6119" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
   <path d="M801.274 157.172c0-21.7-17.937-39.291-40.065-39.291L661.052 117.881l0 39.291c0 21.702-17.937 39.294-40.065 39.294L280.446 196.466c-22.125 0-40.062-17.591-40.062-39.294l0-39.291L120.192 117.881c-22.125 0-40.065 17.591-40.065 39.291l0 746.571c0 21.702 17.939 39.296 40.065 39.296L440.7 943.039l80.129 78.585L80.128 1021.624C35.874 1021.623 0 986.441 0 943.039L0 117.881c0-43.402 35.874-78.59 80.128-78.59l160.256 0c0-21.7 17.937-39.291 40.062-39.291l340.541 0c22.128 0 40.065 17.591 40.065 39.291l140.223 0c44.253 0 80.127 35.188 80.127 78.59l0 360.582-80.127 81.611L801.275 157.172zM620.987 432.227 260.415 432.227c-11.065 0-20.031-8.798-20.031-19.649l0-19.644c0-10.854 8.966-19.647 20.031-19.647l360.572 0c11.063 0 20.034 8.793 20.034 19.647l0 19.644C641.021 423.429 632.05 432.227 620.987 432.227zM641.021 628.692c0 10.849-8.971 19.644-20.034 19.644L260.415 648.336c-11.065 0-20.031-8.796-20.031-19.644l0-19.649c0-10.849 8.966-19.644 20.031-19.644l360.572 0c11.063 0 20.034 8.796 20.034 19.644L641.021 628.692zM466.413 750.879 614.66 877.587l406.964-406.069-401.418 550.105L413.515 802.704 466.413 750.879z" fill="#1296db" p-id="6120"></path>
 </svg>
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTDSVG1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg t="1687246678802" class="icon" viewBox="-300 -250 1624 1200" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1499" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="250">
+<svg t="1687246678802" class="icon" viewBox="-300 -150 1624 1200" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1499" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
   <path d="M805.888 170.496c-74.752 0-132.608 60.928-132.608 132.608 0 48.64 26.624 93.184 69.12 116.224l-124.416 193.536L499.712 532.48l-88.576 132.608-148.992-102.4-176.64 245.76v63.488h27.648l162.816-229.376 143.36 102.4 93.696-132.608 121.344 79.872 168.448-259.584h2.56c74.752 0 132.608-60.928 132.608-132.608S880.64 170.496 805.888 170.496z" fill="#1296db" p-id="1500"></path>
 </svg>
@@ -12,7 +12,3 @@ html {
   width: 100%;
   overflow-x: auto !important;
 }
-body {
-  min-width: 1000px;
-  overflow-x: auto;
-}
@@ -2,22 +2,22 @@
   <div class="bg-grey-darken-3 tw-flex tw-pt-[32px] tw-pb-[32px]">
     <v-container>
       <v-row>
-        <v-col cols="3">
+        <v-col cols="12" lg="3" sm="12" md="6">
           <b>Solution</b>
           <p><router-link to="/equipment">Lab Device</router-link></p>
           <p><router-link to="/customize">Customized BatterTesting</router-link></p>
           <p><router-link to="/pack">Pack</router-link></p>
         </v-col>
-        <v-col cols="3">
+        <v-col cols="12" lg="3" sm="12" md="6">
           <b>Online Product</b>
           <p><router-link to="/products">Material Reagents</router-link></p>
           <p><router-link to="/products">Lab Device Products</router-link></p>
         </v-col>
-        <v-col cols="2">
+        <v-col cols="12" lg="3" sm="12" md="6">
           <b>About</b>
           <p><router-link to="/about">About us</router-link></p>
         </v-col>
-        <v-col cols="4">
+        <v-col cols="12" lg="3" sm="12" md="6">
           <div class="tw-w-[250px] tw-float-left tw-mr-[8px]">
             <b>Contact us</b>
             <p>Email: contact@canrd.com</p>
 <template>
   <v-container>
-    <div class="tw-m-auto tw-flex">
-      <div class="tw-float-left tw-h-[64px] tw-mt-[-4px] tw-w-[100px]">
+    <v-row class="tw-m-auto tw-flex tw-items-center">
+      <v-col cols="2" class="pa-0 tw-h-[64px]">
         <router-link to="/"><v-img src="/logo.jpg" /></router-link>
-      </div>
-      <div class="tw-w-full tw-ml-[12px] tw-mr-[24px]">
+      </v-col>
+      <v-col cols="6" class="px-0">
         <v-text-field
           label="Search keyword"
           hide-details="auto"
@@ -15,20 +15,24 @@
           v-model="input"
         >
         </v-text-field>
-      </div>
-      <v-btn variant="text" @click="dialogStore.updateDialog(true)" color="blue-darken-2 mt-4"
-        >Concat Us
-      </v-btn>
-    </div>
+      </v-col>
+      <v-col cols="4" class="px-0">
+        <v-btn variant="text" @click="dialogStore.updateDialog(true)" color="blue-darken-2 mt-4"
+          >Concat Us
+        </v-btn>
+      </v-col>
+    </v-row>
   </v-container>
   <div class="tabs">
     <div class="tw-max-w-[1200px] tw-mx-auto">
       <v-tabs
+        mobile-breakpoint="580"
         v-model="tab"
         bg-color="blue-darken-1"
         slider-color="grey-lighten-3"
         tab-slider-size="6px"
         selected-class="active"
+        :grow="screenWidth > 600 ? false : true"
       >
         <v-tab :value="1" to="/"
           ><span @click="handleTabClick" class="text-grey-lighten-3 tw-font-bold">Home</span>
@@ -55,6 +59,10 @@ import { useProductListStore } from &#39;@/stores/product_list&#39;
 import { useRouter } from 'vue-router'
 import { useDialogStore } from '@/stores/dialog'
 import { useCategoryStore } from '@/stores/category'
+import { useDisplay } from 'vuetify'
+
+const { width: screenWidth } = useDisplay()
+
 const dialogStore = useDialogStore()
 const productStore = useProductListStore()
 <template>
-  <div class="text-blue-darken-1 text-h3 tw-text-center tw-mb-[16px] font-weight-bold">
+  <div class="text-blue-darken-1 text-h4 text-sm-h3 tw-text-center tw-mb-[16px] font-weight-bold">
     <div :class="titleCls">{{ title }}</div>
   </div>
   <div class="text-body-1 tw-max-w-[600px] tw-m-auto tw-mb-8">
@@ -16,7 +16,7 @@
   </div>
   <v-item-group multiple v-if="!responsive">
     <v-row>
-      <v-col v-for="(item, index) in list" :key="index" cols="12" :lg="lgCol" md="4" sm="6">
+      <v-col v-for="(item, index) in list" :key="index" cols="6" :lg="lgCol" md="4" sm="6">
         <v-hover v-slot="{ isHovering, props }" open-delay="200" :disabled="disabled">
           <v-card
             color="blue-darken-1"
@@ -24,15 +24,12 @@
             :elevation="isHovering ? 16 : 2"
             :class="{ 'on-hover': isHovering }"
             class="mx-auto"
-            height="295"
-            width="260"
+            max-width="260"
             v-bind="props"
             @click="handleCardClick(item)"
           >
             <v-img :src="item.imageUrl" />
-            <div
-              class="text-center bg-blue-darken-1 tw-absolute tw-bottom-0 tw-text-center tw-w-full tw-h-9 tw-leading-9"
-            >
+            <div class="text-center bg-blue-darken-1 tw-text-center tw-w-full tw-h-9 tw-leading-9">
               {{ item.name }}
             </div>
           </v-card>
 <template>
-  <div class="text-blue-darken-1 text-h3 tw-text-center tw-mb-[16px] font-weight-bold">
+  <div class="text-blue-darken-1 tw-text-center tw-mb-[16px] font-weight-bold text-h4 text-sm-h3">
     <div :class="titleCls">{{ title }}</div>
   </div>
   <div class="text-body-1 tw-max-w-[600px] tw-m-auto tw-mb-8">
@@ -16,7 +16,7 @@
   </div>
   <v-item-group multiple>
     <v-row>
-      <v-col v-for="(item, index) in list" :key="index" cols="12" lg="4" md="4" sm="6">
+      <v-col v-for="(item, index) in list" :key="index" cols="4" lg="4" md="4" sm="6">
         <v-hover v-slot="{ isHovering, props }" open-delay="200" :disabled="disabled">
           <v-card
             color="blue-darken-1"
@@ -24,14 +24,11 @@
             :elevation="isHovering ? 16 : 2"
             :class="{ 'on-hover': isHovering }"
             class="pt-5 mx-auto"
-            height="350"
             v-bind="props"
             @click="handleCardClick(item)"
           >
-            <v-img :src="item.imageUrl" width="250" class="text-center ma-auto" />
-            <div
-              class="text-center bg-blue-darken-1 tw-absolute tw-bottom-0 tw-text-center tw-w-full tw-h-9 tw-leading-9"
-            >
+            <v-img :src="item.imageUrl" class="text-center ma-auto" />
+            <div class="text-center bg-blue-darken-1 tw-text-center tw-w-full tw-h-9 tw-leading-9">
               {{ item.name }}
             </div>
           </v-card>
@@ -16,7 +16,7 @@ import messages from &#39;./message&#39;
 const app = createApp(App)
-const vuetify = createVuetify()
+const vuetify = createVuetify({})
 app.use(createPinia())
 app.use(router)
@@ -67,7 +67,6 @@
   <div class="tw-pt-[64px] tw-pb-[128px]">
     <v-container>
       <MainTitleList
-        :responsive="true"
         :title="t('Pack')"
         href="/pack"
         :list="packs"