Browse Source

硬件首页颜色是配

master
maochaoying 2 years ago
parent
commit
a8f812148d
  1. 16
      src/components/AboutUs.vue
  2. 5
      src/components/Cooperation.vue
  3. 17
      src/components/HeadLine.vue
  4. 1
      src/pages/Hardware.vue

16
src/components/AboutUs.vue

@ -1,7 +1,7 @@
<template> <template>
<div class="about_us_card_container"> <div class="about_us_card_container">
<HeadLine themeTitle="关于" title="我们" line1="ABOUT US" :theme="theme" /> <HeadLine themeTitle="关于" title="我们" line1="ABOUT US" :theme="theme" />
<div :class="theme ? 'theme_color tag' : 'tag'">
<div :class="isHard ? 'hard_color tag' : theme ? 'theme_color tag' : 'tag'">
<span class="fontscale">专业从事研发13年</span> <span class="fontscale">专业从事研发13年</span>
</div> </div>
<article class="article"> <article class="article">
@ -16,6 +16,17 @@
<script setup> <script setup>
import HeadLine from 'cpns/HeadLine' import HeadLine from 'cpns/HeadLine'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const isHard = ref(false)
onMounted(() => {
console.log(route)
if (route.path.indexOf('/hardware') != -1) {
isHard.value = true
}
})
const props = defineProps({ const props = defineProps({
theme: { theme: {
type: Boolean, type: Boolean,
@ -48,6 +59,9 @@ const props = defineProps({
white-space: nowrap; white-space: nowrap;
} }
} }
.hard_color {
background: $hardware-theme;
}
.theme_color { .theme_color {
background: $theme-color; background: $theme-color;
} }

5
src/components/Cooperation.vue

@ -1,5 +1,6 @@
<template> <template>
<div class="cooperation_container"> <div class="cooperation_container">
<div class="header_wrap">
<HeadLine <HeadLine
themeTitle="客户" themeTitle="客户"
title="合作" title="合作"
@ -7,6 +8,7 @@
line1="医疗企业 互联网公司 智能硬件公司 科研院所 工业自动化企业" line1="医疗企业 互联网公司 智能硬件公司 科研院所 工业自动化企业"
:theme="theme" :theme="theme"
/> />
</div>
<div class="client_wrap"> <div class="client_wrap">
<div class="card"> <div class="card">
<img :src="A1" alt="" class="img1" /> <img :src="A1" alt="" class="img1" />
@ -66,6 +68,9 @@ const props = defineProps({
<style lang="scss" scoped> <style lang="scss" scoped>
.cooperation_container { .cooperation_container {
.header_wrap {
background: #fff;
}
.client_wrap { .client_wrap {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);

17
src/components/HeadLine.vue

@ -15,6 +15,17 @@
</template> </template>
<script setup> <script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const theme = ref(false)
onMounted(() => {
console.log(route)
if (route.path.indexOf('/hardware') != -1) {
theme.value = true
}
})
const props = defineProps({ const props = defineProps({
themeTitle: { themeTitle: {
type: String, type: String,
@ -33,10 +44,6 @@ const props = defineProps({
line2: { line2: {
type: String, type: String,
}, },
theme: {
type: Boolean,
default: false,
},
}) })
</script> </script>
@ -60,7 +67,7 @@ const props = defineProps({
color: $home-color; color: $home-color;
} }
.theme_color { .theme_color {
color: $theme-color;
color: $hardware-theme;
} }
.scale { .scale {
font-size: 14px; font-size: 14px;

1
src/pages/Hardware.vue

@ -44,6 +44,7 @@ import Cooperation from 'cpns/Cooperation'
<style lang="scss" scoped> <style lang="scss" scoped>
.hardware_home_container { .hardware_home_container {
background: #f5f5f5;
.img_wrap { .img_wrap {
padding: 0 7px; padding: 0 7px;
} }

Loading…
Cancel
Save