diff --git a/pages/goods/index.vue b/pages/goods/index.vue index 295f3c5..21ab05a 100644 --- a/pages/goods/index.vue +++ b/pages/goods/index.vue @@ -15,19 +15,30 @@ - + - + - + {{ + zniconsMap[moduleItem.moduleIcon] + }} {{ moduleItem.moduleTitle }} {{ moduleItem.moduleContent }} @@ -85,6 +96,7 @@ import GoodInfo from "./components/GoodInfo/index.vue"; import ModuleTitle from "@/components/ModuleTitle/index.vue"; import GoodConfirm from "./components/GoodConfirm/index.vue"; import Calender from "@/components/Calender/index.vue"; +import { zniconsMap } from "@/static/fonts/znicons.js"; const calendarVisible = ref(false); const goodsData = ref({}); @@ -268,4 +280,8 @@ const handleDateSelect = (data) => { diff --git a/pages/goods/styles/index.scss b/pages/goods/styles/index.scss index 128ea5f..9d947d4 100644 --- a/pages/goods/styles/index.scss +++ b/pages/goods/styles/index.scss @@ -17,15 +17,16 @@ $button-hover-color: darken($button-color, 8%); // 使用须知样式 .use-notice { - margin-bottom: 16px; + margin: 16px 0; + } + .use-notice-content { .module-item { display: flex; align-items: flex-start; flex-direction: column; - border-bottom: 1px solid #666; padding: 12px 0; - + .module-icon { display: flex; flex-direction: row; @@ -33,19 +34,12 @@ $button-hover-color: darken($button-color, 8%); margin-right: 8px; flex-shrink: 0; - image { - width: 20px; - height: 20px; - object-fit: cover; - background-color: #f55726; - margin-right: 8px; - } - .module-title { font-size: 14px; color: #333; text-align: center; word-wrap: break-word; + margin-left: 4px; } } @@ -57,6 +51,9 @@ $button-hover-color: darken($button-color, 8%); margin-top: 4px; } } + .border-bottom { + border-bottom: 1px solid #f0f0f0; + } } .content-wrapper { diff --git a/static/fonts/znicons.js b/static/fonts/znicons.js new file mode 100644 index 0000000..0e3cf41 --- /dev/null +++ b/static/fonts/znicons.js @@ -0,0 +1,19 @@ +export const zniconsMap = { + "zn-wifi": "\ue681", + "zn-bath": "\ue682", + "zn-frame": "\ue683", + "zn-shower-gel": "\ue684", + "zn-a-washingmachine": "\ue685", + "zn-live": "\ue686", + "zn-user": "\ue687", + "zn-dish-cover": "\ue688", + "zn-glass-cup": "\ue689", + "zn-check-circle": "\ue68a", + "zn-send-filled": "\ue68b", + "zn-nav-arrow-right": "\ue68c", + "zn-nav-arrow-left": "\ue68d", + "zn-nav-arrow-down": "\ue68e", + "zn-fast-arrow-down": "\ue68f", + "zn-nav-arrow-up": "\ue690", + "zn-microphone": "\ue691", +};