diff --git a/components.d.ts b/components.d.ts index 8a1ab83..da40ba6 100644 --- a/components.d.ts +++ b/components.d.ts @@ -13,6 +13,7 @@ declare module 'vue' { ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] ElButton: typeof import('element-plus/es')['ElButton'] + ElCard: typeof import('element-plus/es')['ElCard'] ElCarousel: typeof import('element-plus/es')['ElCarousel'] ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem'] ElCascader: typeof import('element-plus/es')['ElCascader'] @@ -27,7 +28,6 @@ declare module 'vue' { ElEmpty: typeof import('element-plus/es')['ElEmpty'] ElForm: typeof import('element-plus/es')['ElForm'] ElFormItem: typeof import('element-plus/es')['ElFormItem'] - ElHeader: typeof import('element-plus/es')['ElHeader'] ElIcon: typeof import('element-plus/es')['ElIcon'] ElImage: typeof import('element-plus/es')['ElImage'] ElInput: typeof import('element-plus/es')['ElInput'] @@ -35,7 +35,6 @@ declare module 'vue' { ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElOption: typeof import('element-plus/es')['ElOption'] - ElPageHeader: typeof import('element-plus/es')['ElPageHeader'] ElPagination: typeof import('element-plus/es')['ElPagination'] ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm'] ElProgress: typeof import('element-plus/es')['ElProgress'] diff --git a/package-lock.json b/package-lock.json index f456675..f3cfd16 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42,6 +42,7 @@ "@vitejs/plugin-vue-jsx": "^3.0.2", "@vue/tsconfig": "^0.4.0", "npm-run-all2": "^6.1.1", + "postcss-px-to-viewport": "^1.1.1", "sass": "^1.32.13", "typescript": "~5.2.0", "unplugin-auto-import": "^0.17.1", @@ -3917,6 +3918,17 @@ "node": "^10 || ^12 || >=14" } }, + "node_modules/postcss-px-to-viewport": { + "version": "1.1.1", + "resolved": "https://repo.huaweicloud.com/repository/npm/postcss-px-to-viewport/-/postcss-px-to-viewport-1.1.1.tgz", + "integrity": "sha512-2x9oGnBms+e0cYtBJOZdlwrFg/mLR4P1g2IFu7jYKvnqnH/HLhoKyareW2Q/x4sg0BgklHlP1qeWo2oCyPm8FQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "object-assign": ">=4.0.1", + "postcss": ">=5.0.2" + } + }, "node_modules/process-nextick-args": { "version": "2.0.1", "resolved": "https://repo.huaweicloud.com/repository/npm/process-nextick-args/-/process-nextick-args-2.0.1.tgz", diff --git a/package.json b/package.json index dfbf9f9..6ee0cc2 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "@vitejs/plugin-vue-jsx": "^3.0.2", "@vue/tsconfig": "^0.4.0", "npm-run-all2": "^6.1.1", + "postcss-px-to-viewport": "^1.1.1", "sass": "^1.32.13", "typescript": "~5.2.0", "unplugin-auto-import": "^0.17.1", diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..b9658e9 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,18 @@ +module.exports = { + plugins: { + 'postcss-px-to-viewport': { + viewportWidth: 1920, // 设计稿的视口宽度 + viewportHeight: 1080, // 设计稿的视口宽度 + viewportUnit: 'vw', // 希望使用的视口单位 + fontViewportUnit: 'vw', // 字体使用的视口单位 + unitPrecision: 5, + propList: ['*'], + selectorBlackList: ['.ignore'], // 需要忽略的CSS选择器 + minPixelValue: 1, // 小于或等于`1px`不转换为视口单位 + mediaQuery: false, // 允许在媒体查询中转换`px` + selectorBlackList: [':root', 'el-'], // 排除 Element Plus 的类名 + // replace: true, + exclude: [/node_modules\/element-plus/], // 排除 Element Plus 的样式文件 + }, + }, +} diff --git a/src/App.vue b/src/App.vue index 17c5227..3b0b65d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,5 +1,4 @@ - @@ -29,4 +28,8 @@ ::-webkit-scrollbar-corner { background-color: transparent; /* 滚动条和内容区的角落部分，通常用于表格等 */ } + +body { + font-size: 16px; +} diff --git a/src/components/Breadcrumb/index.vue b/src/components/Breadcrumb/index.vue index 4f4cc93..b32b0d7 100644 --- a/src/components/Breadcrumb/index.vue +++ b/src/components/Breadcrumb/index.vue @@ -21,3 +21,9 @@ defineProps({ }, }) + + diff --git a/src/components/FooterInfo/index.vue b/src/components/FooterInfo/index.vue index ff0c8dd..b514f61 100644 --- a/src/components/FooterInfo/index.vue +++ b/src/components/FooterInfo/index.vue @@ -3,56 +3,42 @@ diff --git a/src/components/TitleTip/index.vue b/src/components/TitleTip/index.vue index b90bbea..d0ccecd 100644 --- a/src/components/TitleTip/index.vue +++ b/src/components/TitleTip/index.vue @@ -21,7 +21,7 @@ defineProps({ padding: 10px 0; display: flex; align-items: center; - font-size: 14px; + // font-size: 14px; font-weight: bold; letter-spacing: 1px; } diff --git a/src/components/equipCardHall/index.vue b/src/components/equipCardHall/index.vue index 16fa808..3e83507 100644 --- a/src/components/equipCardHall/index.vue +++ b/src/components/equipCardHall/index.vue @@ -6,8 +6,8 @@ {{ name }} -
  • {{ company }}
    • -
  • +
  • {{ company }}
    • +
  • {{ personPhone }}
    • @@ -15,9 +15,9 @@
    - ￥ - {{ price }} - / 天 + ￥ + {{ price }} + / 天
    @@ -103,7 +103,7 @@ const onHandelLessee = () => { } .item_1_span { - font-size: 16px; + font-size: 20px; font-weight: bold; } .item_2_span { @@ -157,7 +157,7 @@ const onHandelLessee = () => { margin-top: 8px; .item { background: white; - font-size: 14px; + font-weight: 400; color: #005af2; padding: 2px 3px; @@ -168,7 +168,7 @@ const onHandelLessee = () => { } .company { margin-top: 10px; - font-size: 14px; + font-weight: 400; color: #a5a4a4; line-height: 20px; @@ -177,7 +177,6 @@ const onHandelLessee = () => { white-space: nowrap; } .price { - font-size: 14px; font-weight: 400; color: #ff4800; margin-top: 20px; diff --git a/src/components/header/index.vue b/src/components/header/index.vue index 5a2f50f..3eecd52 100644 --- a/src/components/header/index.vue +++ b/src/components/header/index.vue @@ -284,7 +284,7 @@ const isMyInfoPage = () => { display: flex; align-items: center; color: #6d6d6d; - font-size: 14px; + // font-size: 14px; cursor: pointer; .line { diff --git a/src/layout/header.vue b/src/layout/header.vue index 6b75b74..8f053cb 100644 --- a/src/layout/header.vue +++ b/src/layout/header.vue @@ -281,16 +281,7 @@ const onJumpUser = () => {
    - + {{ isAdmin ? '管理方' : rolesName == 1 ? '出租方' : '承租方' }} @@ -298,7 +289,7 @@ const onJumpUser = () => {
    -
    +
    {
    -
    { /* 头部个人信息部分 */ .header-box { + width: 1552px; + margin: 0 auto; height: 37px; display: flex; align-items: center; @@ -475,8 +468,16 @@ const onJumpUser = () => { display: flex; align-items: center; color: #6d6d6d; - font-size: 14px; cursor: pointer; + + .lease-name { + background-color: #c9e7e5; + color: #47c4ad; + padding: 4px 6px; + font-weight: bold; + font-size: 16px; + border-radius: 4px; + } .line { width: 1px; height: 15px; @@ -510,11 +511,12 @@ const onJumpUser = () => { position: relative; } .roles-check .select-list { - height: 50px; + // height: 50px; // display: none; position: absolute; left: 1%; - bottom: -46px; + bottom: 0; + transform: translateY(100%); width: 98%; background-color: #fff; border-radius: 6px; @@ -523,9 +525,9 @@ const onJumpUser = () => { transition: all 1s linear; div { - height: 25px; - font-size: 14px; - line-height: 25px; + height: 30px; + font-size: 16px; + line-height: 30px; text-align: center; letter-spacing: 1px; } @@ -575,36 +577,48 @@ const onJumpUser = () => { /* 中间logo 搜索框部分 */ .logo-ipt-container { + width: 1552px; + margin: 0 auto; position: relative; display: flex; align-items: center; background-color: #eeeff6; - padding: 30px 0; - box-sizing: content-box; + padding: 30px; + box-sizing: border-box; + // box-sizing: content-box; // padding: 30px 0 60px 0; .home-logo { - width: 286px; - height: 100%; + // width: 286px; + // height: 100%; + width: 240px; + height: 80px; + background-color: orange; + background: url('@/assets/img/logo.png') no-repeat; + background-size: 100% 100%; + cursor: pointer; } .home-search { position: relative; - width: 1000px; - margin-left: 40px; + flex: 1; + width: 100%; + margin: 0 20px; + // width: 1000px; + // margin-left: 40px; .left-check-box { position: absolute; left: 0; top: 0; height: 53px; - width: 70px; + width: 100px; display: flex; align-items: center; justify-content: center; border-right: 1px solid #3cb4a6; - font-size: 14px; + // font-size: 14px; color: #11806f; cursor: pointer; } @@ -612,8 +626,9 @@ const onJumpUser = () => { .check-container { position: absolute; left: 0; - bottom: -100%; - width: 70px; + bottom: 0; + transform: translateY(100%); + width: 100px; background-color: #fff; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); @@ -622,9 +637,9 @@ const onJumpUser = () => { cursor: pointer; div { - height: 25px; - font-size: 14px; - line-height: 25px; + height: 35px; + // font-size: 14px; + line-height: 35px; text-align: center; letter-spacing: 1px; } @@ -637,7 +652,10 @@ const onJumpUser = () => { } .cart-container { - flex: 1; + width: 130px; + // background-color: orange; + // height: 60px; + // flex: 1; } // img { @@ -656,7 +674,7 @@ const onJumpUser = () => { line-height: 53px; color: #333; text-shadow: 0 0 0 #333; - padding-left: 75px; + padding-left: 110px; box-sizing: border-box; } diff --git a/src/style/css/reset.css b/src/style/css/reset.css index d753df2..5c128b1 100644 --- a/src/style/css/reset.css +++ b/src/style/css/reset.css @@ -137,13 +137,13 @@ table { } #app { - width: 100vw; + /* width: 100vw; */ /* height: 100vh; */ background: linear-gradient(180deg, #ecedf5 0%, #f2f3f9 55%, #ffffff 100%); } .wapper { - width: 1200px; + width: 1552px; margin: 0 auto; } diff --git a/src/views/AppMain-old.vue b/src/views/AppMain-old.vue new file mode 100644 index 0000000..7b45b52 --- /dev/null +++ b/src/views/AppMain-old.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/src/views/AppMain.vue b/src/views/AppMain.vue index 7b45b52..ff1b28c 100644 --- a/src/views/AppMain.vue +++ b/src/views/AppMain.vue @@ -1,18 +1,7 @@ @@ -21,27 +10,31 @@ onMounted(() => {})
    - +
    -
    - - + diff --git a/src/views/cart/index.vue b/src/views/cart/index.vue index 2b02e46..663aa2c 100644 --- a/src/views/cart/index.vue +++ b/src/views/cart/index.vue @@ -1,97 +1,100 @@