feat: 更新标题&图片alt&keyword&h4

sanmu
1 parent 3ec84c85
Showing 23 changed files with 138 additions and 80 deletions
README.md
components/ContactDialog.vue
components/Footer.vue
components/Header.vue
components/MainTitleList.vue
components/MainTitleListOdd.vue
components/MobileHeader.vue
components/MobileProductDetail.vue
components/ProductDetail.vue
deploy/prod.sh
package.json
pages/contact.vue
pages/customize.vue
pages/equipment.vue
pages/index.vue
pages/pack.vue
pages/products/detail/[id]/index.vue
pages/products/index.vue
pages/test.vue
pnpm-lock.yaml
@@ -17,9 +17,9 @@ docker run -d -p 8088:3000 --name canrud-outside-front canrud-outside-front:dev
 1. 修改 deploy/prod.sh的 TAG 将版本号+1，默认改动小版本，如1.0.0->1.0.1
 1. 在根目录执行 sh deploy/prod.sh
 1. 登录112服务器，，将镜像拷贝到生产的47服务器
-scp /root/web/canrud-outside-nuxt-front/canrud-outside-front_1.0.2.tar root@47.89.254.121:/root/web/canrud-outside-nuxt-front
+scp /root/web/canrud-outside-nuxt-front/canrud-outside-front_1.0.6.tar root@47.89.254.121:/root/web/canrud-outside-nuxt-front
 1. 登录47服务器，进入到 /root/web/canrud-outside-nuxt-front 目录
-1. 加载镜像 docker load -i canrud-outside-front_1.0.2.tar (1.0.0对应你的tag)
+1. 加载镜像 docker load -i canrud-outside-front_1.0.6.tar (1.0.0对应你的tag)
 1. 修改 docker-compose.yaml 的镜像版本号
 1. 启动服务 docker-compose up -d
@@ -34,7 +34,7 @@
         <span class="text-grey-darken-4 font-weight-medium"> contactcanrd </span>
       </v-card-text>
       <p>
-        <img src="/wechat.jpg" alt="" width="140" class="tw-m-auto tw-block" />
+        <img src="/wechat.jpg" alt="canrud-wechat" width="140" class="tw-m-auto tw-block" />
       </p>
       <!-- <v-card-actions class="pa-0">
         <v-btn color="blue-darken-1" block @click="dialogStore.updateDialog(false)">Close </v-btn>
@@ -24,7 +24,7 @@
             <p>Phone： +86 19867737979</p>
             <p>Wechat： contactcanrd</p>
           </div>
-          <img class="tw-float-left" src="/wechat.jpg" width="80" />
+          <img class="tw-float-left" src="/wechat.jpg" alt="canrud-wechat" width="80" />
         </v-col>
       </v-row>
     </v-container>
@@ -38,10 +38,12 @@ b {
   margin-bottom: 12px;
   display: block;
 }
+
 p {
   cursor: pointer;
   margin-bottom: 8px;
 }
+
 p a:hover {
   color: #e0e0e0;
 }
@@ -5,8 +5,8 @@
         <router-link to="/"><v-img src="/logo.jpg" alt="canrud" /></router-link>
       </v-col>
       <v-col cols="6" md="8" class="px-0">
-        <v-text-field label="Search keyword" hide-details="auto" variant="solo" append-inner-icon="mdi-magnify"
-          @click:appendInner="handleClick" @keydown="handleKeyDown" v-model="input">
+        <v-text-field name="keyword" label="Search keyword" hide-details="auto" variant="solo"
+          append-inner-icon="mdi-magnify" @click:appendInner="handleClick" @keydown="handleKeyDown" v-model="input">
         </v-text-field>
       </v-col>
       <v-col cols="4" md="2" class="px-0">
@@ -30,11 +30,11 @@
         <v-tab :value="4" to="/contact"><span @click="handleTabClick"
             class="text-grey-lighten-3 tw-font-bold">Contact</span>
         </v-tab>
-		<v-tab>
-			<span class="text-grey-lighten-3 tw-font-bold">
-				<a href="http://blog.canrud.com/" target="" title="Blog">Blog</a>
-			</span>
-		</v-tab>
+        <v-tab>
+          <span class="text-grey-lighten-3 tw-font-bold">
+            <a href="http://blog.canrud.com/" target="" title="Blog">Blog</a>
+          </span>
+        </v-tab>
       </v-tabs>
     </div>
   </div>
@@ -71,7 +71,7 @@ const handleClick = () =&gt; {
   categoryStore.updateDisplay(!input.value)
   productStore.updateKeyword(input.value)
   productStore.updatePageNo(1)
-  router.push('/products')
+  router.push({ path: '/products', query: { keyword: input.value } })
 }
 const tab = ref(1)
@@ -100,6 +100,11 @@ onMounted(() =&gt; {
     if (obj.flag) {
       dialog.updateDialog(true)
     }
+
+    if (obj.keyword) {
+      productStore.updateKeyword(obj.keyword)
+      categoryStore.updateDisplay(false)
+    }
   }
 })
 </script>
 <template>
   <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>
+    <h2 :class="titleCls">{{ title }}</h2>
   </div>
   <div class="text-body-1 tw-max-w-[600px] tw-m-auto tw-mb-8">
-    <span class="tw-mb-[64px] tw-max-w-[600px] tw-m-auto font-weight-medium text-grey-darken-1">{{
+    <section class="tw-inline tw-mb-[64px] tw-max-w-[600px] tw-m-auto font-weight-medium text-grey-darken-1">{{
       desc
-    }}</span>
+    }}</section>
     <router-link :to="href" v-if="href">
       <span
-        class="font-weight-bold text-decoration-underline tw-inline-block tw-underline tw-text-sky-500 hover:tw-text-sky-800"
-        >detail
+        class="font-weight-bold text-decoration-underline tw-inline-block tw-underline tw-text-sky-500 hover:tw-text-sky-800">detail
         <v-icon class="tw-mt-[-4px]" size="18" icon="mdi-arrow-right"></v-icon>
       </span>
     </router-link>
@@ -18,16 +17,9 @@
     <v-row>
       <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"
-            variant="outlined"
-            :elevation="isHovering ? 16 : 2"
-            :class="{ 'on-hover': isHovering }"
-            class="mx-auto"
-            max-width="260"
-            v-bind="props"
-            @click="handleCardClick(item)"
-        >
+          <v-card color="blue-darken-1" variant="outlined" :elevation="isHovering ? 16 : 2"
+            :class="{ 'on-hover': isHovering }" class="mx-auto" max-width="260" v-bind="props"
+            @click="handleCardClick(item)">
             <v-img :src="item.imageUrl" :alt="item.name" />
             <div class="text-center bg-blue-darken-1 tw-text-center tw-w-full tw-h-9 tw-leading-9">
               {{ item.name }}
@@ -41,21 +33,12 @@
     <v-row>
       <v-col v-for="(item, index) in list" :key="index">
         <v-hover v-slot="{ isHovering, props }" open-delay="200" :disabled="disabled">
-          <v-card
-            color="blue-darken-1"
-            variant="outlined"
-            :elevation="isHovering ? 16 : 2"
-            :class="{ 'on-hover': isHovering }"
-            class="pt-5 mx-auto"
-            height="350"
-            v-bind="props"
-            :href="item.href ? item.href : undefined"
-            @click="handleCardClick(item)"
-          >
+          <v-card color="blue-darken-1" variant="outlined" :elevation="isHovering ? 16 : 2"
+            :class="{ 'on-hover': isHovering }" class="pt-5 mx-auto" height="350" v-bind="props"
+            :href="item.href ? item.href : undefined" @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"
-            >
+              class="text-center bg-blue-darken-1 tw-absolute tw-bottom-0 tw-text-center tw-w-full tw-h-9 tw-leading-9">
               {{ item.name }}
             </div>
           </v-card>
 <template>
   <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>
+    <h2 :class="titleCls">{{ title }}</h2>
   </div>
   <div class="text-body-1 tw-max-w-[600px] tw-m-auto tw-mb-8">
     <span class="tw-mb-[64px] tw-max-w-[600px] tw-m-auto font-weight-medium text-grey-darken-1">{{
       desc
-    }}</span>
+      }}</span>
     <router-link :to="href" v-if="href">
       <span
-        class="font-weight-bold text-decoration-underline tw-inline-block tw-underline tw-text-sky-500 hover:tw-text-sky-800"
-        >detail
+        class="font-weight-bold text-decoration-underline tw-inline-block tw-underline tw-text-sky-500 hover:tw-text-sky-800">detail
         <v-icon class="tw-mt-[-4px]" size="18" icon="mdi-arrow-right"></v-icon>
       </span>
     </router-link>
@@ -18,16 +17,18 @@
     <v-row>
       <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"
-            variant="outlined"
-            :elevation="isHovering ? 16 : 2"
-            :class="{ 'on-hover': isHovering }"
-            class="pt-5 mx-auto"
-            v-bind="props"
-            @click="handleCardClick(item)"
-          >
-            <v-img :src="item.imageUrl" class="text-center ma-auto" :alt="item.name" />
+          <v-card color="blue-darken-1" variant="outlined" :elevation="isHovering ? 16 : 2"
+            :class="{ 'on-hover': isHovering }" class="pt-5 mx-auto " v-bind="props" @click="handleCardClick(item)">
+            <div class="relative w-full bg-gray-200 aspect-w-1 aspect-h-1 aspect-w ">
+              <v-img :src="item.imageUrl" class="tw-min-h-[100px] absolute inset-0 object-cover w-full h-full"
+                :alt="item.name">
+                <template v-slot:placeholder>
+                  <div class="justify-center d-flex align-center fill-height">
+                    <v-progress-circular color="grey-lighten-4" indeterminate></v-progress-circular>
+                  </div>
+                </template>
+              </v-img>
+            </div>
             <div class="text-center bg-blue-darken-1 tw-text-center tw-w-full tw-h-9 tw-leading-9">
               {{ item.name }}
             </div>
@@ -36,10 +36,10 @@
           <v-divider></v-divider>
           <v-list-item to="/contact" title="Contact" value="contact" @click="handleTabClick"
             color="blue-darken-1"></v-list-item>
-		  <v-divider></v-divider>
-		  <v-list-item title="Blog" value="blog" color="blue-darken-1">
-			  <a href="http://blog.canrud.com/" target="" title="Blog">Blog</a>
-		  </v-list-item>
+          <v-divider></v-divider>
+          <v-list-item title="Blog" value="blog" color="blue-darken-1">
+            <a href="http://blog.canrud.com/" target="" title="Blog">Blog</a>
+          </v-list-item>
         </v-list>
       </v-navigation-drawer>
     </v-layout>
@@ -111,6 +111,28 @@ const handleTabClick = () =&gt; {
 watchEffect(() => {
   input.value = productStore.keyword
 })
+
+onMounted(() => {
+  // 获取url的参数
+  const url = window.location.href
+  const index = url.indexOf('?')
+  if (index !== -1) {
+    const params = url.slice(index + 1).split('&')
+    const obj: any = {}
+    params.forEach((item) => {
+      const arr = item.split('=')
+      obj[arr[0]] = arr[1]
+    })
+    // 获取dialog的状态
+    if (obj.flag) {
+      dialog.updateDialog(true)
+    }
+
+    if (obj.keyword) {
+      productStore.updateKeyword(obj.keyword)
+    }
+  }
+})
 </script>
 <style lang="scss" scoped>
@@ -43,7 +43,8 @@
           </div>
         </div>
       </v-sheet>
-      <v-btn size="large" color="blue-darken-1" @click="dialogStore.updateDialog(true)">
+      <v-btn size="large" color="blue-darken-1" @click="router.push('/contact')">
+
         Quotation Inquiry
       </v-btn>
     </div>
@@ -115,6 +116,7 @@ const info = props.info
 // })
 const tab = ref(0)
 const slide = ref(0)
+const router = useRouter()
 </script>
 <style lang="scss" scoped>
@@ -43,7 +43,7 @@
               <td class="td text-grey-darken-4 font-weight-medium">{{ item.typeName }}</td>
               <!-- <td class="td">{{ item.price }}</td> -->
               <td class="td">
-                <v-btn size="small" color="blue-darken-1" @click="dialogStore.updateDialog(true)">
+                <v-btn size="small" color="blue-darken-1" @click="router.push('/contact')">
                   Quotation Inquiry
                 </v-btn>
               </td>
@@ -123,6 +123,7 @@ const info = props.info
 const tab = ref(0)
 const slide = ref(0)
+const router = useRouter()
 </script>
 <style lang="scss" scoped>
@@ -2,7 +2,7 @@
 # 变量定义
 IMAGE_NAME="canrud-outside-front"
-TAG="1.0.3"
+TAG="1.0.6"
 TAR_FILE="${IMAGE_NAME}_${TAG}.tar"
 REMOTE_HOST="root@112.74.45.244"
 REMOTE_DIR="/root/web/canrud-outside-nuxt-front"
@@ -19,6 +19,7 @@
   },
   "devDependencies": {
     "@nuxtjs/i18n": "^8.3.1",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "sass": "^1.77.1",
@@ -24,11 +24,15 @@
       <span>contactcanrd</span>
     </div>
     <div class="tw-w-[300px]">
-      <v-img src="/wechat.jpg"></v-img>
+      <v-img src="/wechat.jpg" alt="canrud-wechat"></v-img>
     </div>
   </v-card>
 </template>
-<script setup lang="ts"></script>
+<script setup lang="ts">
+useHead({
+  title: 'Contact',
+
+})</script>
 <style lang="less" scoped></style>
@@ -179,7 +179,7 @@ import ContentDescription from &#39;@/components/ContentDescription.vue&#39;
 import { isMobile } from '~/utils'
 useHead({
-  title: 'About Us',
+  title: 'Customize',
   meta: [
     {
       name: 'title',
@@ -203,7 +203,7 @@ let equipTimer: any = null
 let pouchTimer: any = null
 useHead({
-  title: 'About Us',
+  title: 'Equipment',
   meta: [
     {
       name: 'title',
@@ -56,8 +56,8 @@ import MainTitleListOdd from &#39;../components/MainTitleListOdd.vue&#39;
 import { useCategoryStore } from '../stores/category'
 import { computed } from 'vue'
 import { isMobile } from '../utils'
-onMounted(()=>{
-  console.log('%c [ onMounted ]-10', 'font-size:13px; background:pink; color:#bf2c9f;',111)
+onMounted(() => {
+  console.log('%c [ onMounted ]-10', 'font-size:13px; background:pink; color:#bf2c9f;', 111)
 })
 useHead({
   title: 'canrud',
@@ -65,15 +65,18 @@ useHead({
     {
       name: 'title',
       content: "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!"
-    },{
+    }, {
       name: 'keywords',
       content:
-            '科路得,canrd,canrud,Energy Storage Research,Lithium Batteries Research,Material Reagents,Lab Device,Customized Battery,Testing,Pack',
-    },{
-      name:"description",
+        '科路得,canrd,canrud,Energy Storage Research,Lithium Batteries Research,Material Reagents,Lab Device,Customized Battery,Testing,Pack',
+    }, {
+      name: "description",
       content:
-            "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!"
-    }]
+        "科路得,助您科研之路势在必得。Canrd aims to be the world's leading one-stop service provider in new energy research. With a dedication to excellence, we offer Material Reagents, Lab Devices, Customized Batteries, Testing, and Advanced Packaging for energy materials and storage systems. We master advanced technologies to provide high-quality solutions. Our team's quick responses ensure tailored and professional services to meet your unique needs. Contact us at contact@canrd.com or call +86 19867737979 to explore our innovative offerings. Together, let's shape a greener, brighter world!"
+    }],
+  link: [
+    { rel: 'preload', href: '/banner/banner1.jpg', as: 'image' }
+  ]
 })
 // useAsyncData(async ({ app }) => {
@@ -101,7 +104,7 @@ const banners = [
   '/banner/banner1.jpg',
   '/banner/banner2.jpg',
   '/banner/banner3.jpg',
-  '/banner/banner4.png'
+  '/banner/banner5.jpg'
 ]
 const mobileBanners = [
@@ -74,7 +74,7 @@ import { ref, onMounted, onUnmounted } from &#39;vue&#39;
 import { isMobile } from '~/utils'
 useHead({
-  title: 'canrud',
+  title: 'Pack',
   meta: [{
     name: 'title',
     content:
@@ -28,6 +28,25 @@ let { data: resData } = await useAsyncData(&#39;detail&#39;, () =&gt; $fetch(&#39;/shop/product
   server: true  // 仅在服务器端获取数据
 })
+useHead({
+  title: info.name || 'canrud',
+  meta: [
+    {
+      name: 'title',
+      content:
+        '科路得,Equipment,High-precision,Machining center,Design,Manufacturing capabilities,Equipment supply,Production line planning,Construction services,Battery assembly lines,Pouch cell testing lines',
+    }, {
+      name: 'keywords',
+      content:
+        '科路得,Equipment,High-precision,Machining center,Design,Manufacturing capabilities,Equipment supply,Production line planning,Construction services,Battery assembly lines,Pouch cell testing lines',
+    }, {
+      name: 'description',
+      content:
+        '科路得,助您科研之路势在必得。Equipment Business: With our self-built high-precision machining center, we possess robust design and manufacturing capabilities. We offer comprehensive equipment supply, production line planning, and construction services, including battery assembly lines, pouch cell testing lines, and more. Our aim is to provide complete equipment solutions that cater to the diverse needs of our clients. Expect top-quality equipment and professional services that will help you stand out in a fiercely competitive market!'
+    },
+  ],
+})
+
 const newData: Product = resData.value.data
 newData.productimageliststore = typeof newData.productimageliststore === 'string' ?
@@ -23,9 +23,11 @@
                     </div>
                   </v-expand-transition> -->
                 </v-img>
-                <v-card-text class="tw-text-left font-weight-medium title">{{
-                  item.name
-                }}</v-card-text>
+                <v-card-text class="tw-text-left font-weight-medium title">
+                  <h4>{{
+                    item.name
+                    }}</h4>
+                </v-card-text>
               </v-card>
             </v-hover>
           </v-col>
@@ -104,7 +104,7 @@ import { onMounted, onUnmounted, ref } from &#39;vue&#39;
 import { isMobile } from '~/utils'
 useHead({
-  title: 'canrud',
+  title: 'Test',
   meta: [{
     name: 'title',
     content:
@@ -28,6 +28,9 @@ devDependencies:
   '@nuxtjs/i18n':
     specifier: ^8.3.1
     version: 8.3.1(rollup@4.17.2)(vue@3.4.27)
+  '@tailwindcss/aspect-ratio':
+    specifier: ^0.4.2
+    version: 0.4.2(tailwindcss@3.4.3)
   autoprefixer:
     specifier: ^10.4.19
     version: 10.4.19(postcss@8.4.38)
@@ -1901,6 +1904,14 @@ packages:
     resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==}
     engines: {node: '>=18'}
+  /@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.3):
+    resolution: {integrity: sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==}
+    peerDependencies:
+      tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1'
+    dependencies:
+      tailwindcss: 3.4.3
+    dev: true
+
   /@trysound/sax@0.2.0:
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
@@ -21,5 +21,7 @@ export default {
       }
     },
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/aspect-ratio'),
+  ],
 }
 \ No newline at end of file