Hooke / hager

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
4fa99b93 1 parent ee56c986

产品中心相关页面显示样式调整

Inline Side-by-side
Showing 3 changed files with 114 additions and 46 deletions
...@@ -42,21 +42,19 @@ import mixin from "common/mixin"; ...@@ -42,21 +42,19 @@ import mixin from "common/mixin";
42 42
43 export default { 43 export default {
44 mixins: [mixin.init], 44 mixins: [mixin.init],
45 + props: {
46 + // 父组件传递的图片列表
47 + images: {
48 + type: Array,
49 + default: () => [],
50 + },
51 + },
45 data() { 52 data() {
46 return { 53 return {
47 selectedImage: 0, // 当前选中的图片索引 54 selectedImage: 0, // 当前选中的图片索引
48 startIndex: 0, // 当前显示的缩略图起始索引 55 startIndex: 0, // 当前显示的缩略图起始索引
49 thumbnailsToShow: 4, // 每次显示4个缩略图 56 thumbnailsToShow: 4, // 每次显示4个缩略图
50 isTransitioning: false, // 控制大图的切换动画 57 isTransitioning: false, // 控制大图的切换动画
51 - images: [
52 - "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
53 - "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
54 - "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
55 - "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
56 - "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
57 - "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
58 - "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
59 - ],
60 }; 58 };
61 }, 59 },
62 mounted() {}, 60 mounted() {},
......
1 <!-- 1 <!--
2 * @Date: 2024-09-29 14:26:41 2 * @Date: 2024-09-29 14:26:41
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-17 16:43:38 4 + * @LastEditTime: 2024-10-21 16:20:10
5 * @FilePath: /hager/src/views/product/detail.vue 5 * @FilePath: /hager/src/views/product/detail.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
20 <hager-box class="box-n"> 20 <hager-box class="box-n">
21 <el-row v-if="!is_xs" :gutter="10" style="margin-bottom: 3rem;"> 21 <el-row v-if="!is_xs" :gutter="10" style="margin-bottom: 3rem;">
22 <el-col :span="10"> 22 <el-col :span="10">
23 - <hager-carousel></hager-carousel> 23 + <hager-carousel :images="images"></hager-carousel>
24 </el-col> 24 </el-col>
25 <el-col :span="14"> 25 <el-col :span="14">
26 <div class="product-detail-info"> 26 <div class="product-detail-info">
...@@ -71,19 +71,28 @@ ...@@ -71,19 +71,28 @@
71 <div :class="['button', is_xs ? 'xs' : '', is_active === 3 ? 'active' : '']" @click="onClick(3)">安装教程</div> 71 <div :class="['button', is_xs ? 'xs' : '', is_active === 3 ? 'active' : '']" @click="onClick(3)">安装教程</div>
72 </div> 72 </div>
73 <div v-if="!is_xs"> 73 <div v-if="!is_xs">
74 - <div @click="goToDownload" :class="['button', is_download_checked ? 'active' : '']">下载选中</div> 74 + <div @click="goToDownload" :class="['button', is_download_checked ? 'active' : '']">发送到邮箱</div>
75 </div> 75 </div>
76 </div> 76 </div>
77 <div> 77 <div>
78 + <div class="mini-download-wrapper" v-if="is_xs">
79 + <div>
80 + <span @click="checkAll">全选</span>&nbsp;
81 + <span v-if="checked_sum">已选 {{ checked_sum }}</span>
82 + </div>
83 + <div @click="goToDownload" :class="['button', is_download_checked ? 'active' : '']">发送到邮箱</div>
84 + </div>
78 <div class="info-list" v-for="(item, index) in download_list" :key="index"> 85 <div class="info-list" v-for="(item, index) in download_list" :key="index">
79 <div class="info-list-title"> 86 <div class="info-list-title">
80 - <i class="el-icon-document" style="font-size: 1.5rem;"></i>&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;{{ item.size }}
81 - </div>
82 - <div class="info-list-control">
83 - <span>预览</span>
84 - <span>直接下载</span>
85 <i v-if="item.checked" @click="item.checked = !item.checked" class="el-icon-folder-checked download-checked"></i> 87 <i v-if="item.checked" @click="item.checked = !item.checked" class="el-icon-folder-checked download-checked"></i>
86 <i v-else @click="item.checked = !item.checked" class="el-icon-folder download-unchecked"></i> 88 <i v-else @click="item.checked = !item.checked" class="el-icon-folder download-unchecked"></i>
89 + <i class="el-icon-document" style="font-size: 1.25rem; margin-left: 1rem;"></i>&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;{{ item.size }}
90 + </div>
91 + <div class="info-list-control">
92 + <div @click="preview(item)">预览</div>
93 + <div @click="sendEmail" class="icon-wrapper">
94 + <img style="height: 1rem;" src="https://cdn.ipadbiz.cn/hager/icon/%E9%82%AE%E4%BB%B6@2x.png">
95 + </div>
87 </div> 96 </div>
88 </div> 97 </div>
89 </div> 98 </div>
...@@ -117,16 +126,20 @@ export default { ...@@ -117,16 +126,20 @@ export default {
117 checked: false 126 checked: false
118 }], 127 }],
119 images: [ 128 images: [
120 - "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", 129 + "https://cdn.ipadbiz.cn/hager/img/product/P11.jpg",
121 - "https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg", 130 + "https://cdn.ipadbiz.cn/hager/img/product/t01.jpg",
122 - "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg", 131 + "https://cdn.ipadbiz.cn/hager/img/product/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240920151453.png",
132 + "https://cdn.ipadbiz.cn/hager/img/product/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240920151457.png",
123 ] 133 ]
124 } 134 }
125 }, 135 },
126 computed: { 136 computed: {
127 is_download_checked () { 137 is_download_checked () {
128 return this.download_list.filter(item => item.checked).length > 0; 138 return this.download_list.filter(item => item.checked).length > 0;
129 - } 139 + },
140 + checked_sum () {
141 + return this.download_list.filter(item => item.checked).length;
142 + },
130 }, 143 },
131 mounted () { 144 mounted () {
132 145
...@@ -137,23 +150,47 @@ export default { ...@@ -137,23 +150,47 @@ export default {
137 }, 150 },
138 goToDownload () { 151 goToDownload () {
139 if (this.is_download_checked) { 152 if (this.is_download_checked) {
140 - MessageBox.prompt('请输入发送邮箱', '温馨提示', { 153 + // 发送邮箱接口
154 + MessageBox.confirm('是否发送到邮箱？', '提示', {
141 confirmButtonText: '确定', 155 confirmButtonText: '确定',
142 cancelButtonText: '取消', 156 cancelButtonText: '取消',
143 - inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/, 157 + type: 'warning'
144 - inputErrorMessage: '邮箱格式不正确' 158 + }).then(() => {
145 - }).then(({ value }) => {
146 Message({ 159 Message({
147 type: 'success', 160 type: 'success',
148 - message: '你的邮箱是: ' + value 161 + message: '发送成功'
149 }); 162 });
150 }).catch(() => { 163 }).catch(() => {
151 Message({ 164 Message({
152 type: 'info', 165 type: 'info',
153 - message: '取消输入' 166 + message: '已取消发送'
154 - }); 167 + })
155 - }); 168 + })
156 } 169 }
170 + },
171 + checkAll () {
172 + this.download_list.forEach(item => item.checked = true);
173 + },
174 + sendEmail () {
175 + // 发送邮箱接口
176 + MessageBox.confirm('是否发送到邮箱？', '提示', {
177 + confirmButtonText: '确定',
178 + cancelButtonText: '取消',
179 + type: 'warning'
180 + }).then(() => {
181 + Message({
182 + type: 'success',
183 + message: '发送成功'
184 + });
185 + }).catch(() => {
186 + Message({
187 + type: 'info',
188 + message: '已取消发送'
189 + })
190 + })
191 + },
192 + preview (item) {
193 + window.open(item, '_blank');
157 } 194 }
158 } 195 }
159 } 196 }
...@@ -256,7 +293,8 @@ export default { ...@@ -256,7 +293,8 @@ export default {
256 display: flex; 293 display: flex;
257 justify-content: center; 294 justify-content: center;
258 align-items: center; 295 align-items: center;
259 - span { 296 + color: @primary-color;
297 + div {
260 margin-right: 1rem; 298 margin-right: 1rem;
261 &:hover { 299 &:hover {
262 cursor: pointer; 300 cursor: pointer;
...@@ -264,7 +302,18 @@ export default { ...@@ -264,7 +302,18 @@ export default {
264 text-decoration: underline; 302 text-decoration: underline;
265 } 303 }
266 } 304 }
267 - .download-checked { 305 + .icon-wrapper {
306 + display: flex;
307 + justify-content: center; /* 水平居中 */
308 + align-items: center; /* 垂直居中 */
309 + img {
310 + max-width: 100%; /* 确保图片不会超出容器 */
311 + height: auto; /* 保持图片的宽高比 */
312 + }
313 + }
314 + }
315 +
316 + .download-checked {
268 font-size: 1.5rem; 317 font-size: 1.5rem;
269 color: @primary-color; 318 color: @primary-color;
270 &:hover { 319 &:hover {
...@@ -277,6 +326,22 @@ export default { ...@@ -277,6 +326,22 @@ export default {
277 cursor: pointer; 326 cursor: pointer;
278 } 327 }
279 } 328 }
329 + }
330 +
331 + .mini-download-wrapper {
332 + display: flex;
333 + align-items: center;
334 + justify-content: space-between;
335 + margin-top: 1rem;
336 + .button {
337 + background-color: #f3f3f3;
338 + padding: 0.85rem 1rem;
339 + border-radius: 5px;
340 + text-align: center;
341 + &.active {
342 + background-color: @primary-color;
343 + color: #fff;
344 + }
280 } 345 }
281 } 346 }
282 } 347 }
...@@ -287,8 +352,9 @@ export default { ...@@ -287,8 +352,9 @@ export default {
287 text-align: center; 352 text-align: center;
288 color: #333; 353 color: #333;
289 border-radius: 8px; 354 border-radius: 8px;
290 - background-color: #f3f3f3; 355 + background-color: #FFF;
291 margin-bottom: 1rem; 356 margin-bottom: 1rem;
357 + border: 1px solid #ebebeb;
292 } 358 }
293 } 359 }
294 </style> 360 </style>
......
1 <!-- 1 <!--
2 * @Date: 2024-09-27 16:53:09 2 * @Date: 2024-09-27 16:53:09
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-10-18 17:40:37 4 + * @LastEditTime: 2024-10-21 16:13:58
5 * @FilePath: /hager/src/views/product/index.vue 5 * @FilePath: /hager/src/views/product/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
23 <el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_input"></el-input> 23 <el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_input"></el-input>
24 <el-collapse v-model="activeNames" @change="handleChange"> 24 <el-collapse v-model="activeNames" @change="handleChange">
25 <el-collapse-item v-for="(item, index) in c_list" :key="index" :title="item.title" :name="item.name"> 25 <el-collapse-item v-for="(item, index) in c_list" :key="index" :title="item.title" :name="item.name">
26 - <div @click="goToP(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.name }}</div> 26 + <div @click="goToDetail(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.name }}</div>
27 </el-collapse-item> 27 </el-collapse-item>
28 </el-collapse> 28 </el-collapse>
29 </div> 29 </div>
...@@ -32,9 +32,9 @@ ...@@ -32,9 +32,9 @@
32 <div class="product-list"> 32 <div class="product-list">
33 <div class="product-item" v-for="(item, index) in 6" :key="index"> 33 <div class="product-item" v-for="(item, index) in 6" :key="index">
34 <div class="product-item-img"> 34 <div class="product-item-img">
35 - <el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image> 35 + <el-image style="width: 100%; height: 100%" src="https://cdn.ipadbiz.cn/hager/img/product/t01.jpg" fit="fit"></el-image>
36 </div> 36 </div>
37 - <p @click="goToP(item)" class="product-item-title">acb hw 空气断路器</p> 37 + <p @click="goToDetail(item)" class="product-item-title">acb hw 空气断路器</p>
38 </div> 38 </div>
39 </div> 39 </div>
40 <div style="height: 5rem;"></div> 40 <div style="height: 5rem;"></div>
...@@ -42,10 +42,10 @@ ...@@ -42,10 +42,10 @@
42 </el-row> 42 </el-row>
43 <div v-else class="product-list"> 43 <div v-else class="product-list">
44 <div class="product-item xs" v-for="(item, index) in 6" :key="index"> 44 <div class="product-item xs" v-for="(item, index) in 6" :key="index">
45 - <div class="product-item-img"> 45 + <div @click="goToDetail(item)" class="product-item-img xs">
46 - <el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image> 46 + <el-image style="width: 100%; height: 100%" src="https://cdn.ipadbiz.cn/hager/img/product/t01.jpg" fit="fit"></el-image>
47 </div> 47 </div>
48 - <p @click="goToP(item)" class="product-item-title">acb hw 空气断路器</p> 48 + <p @click="goToDetail(item)" class="product-item-title">acb hw 空气断路器</p>
49 </div> 49 </div>
50 </div> 50 </div>
51 <div style="height: 5rem;"></div> 51 <div style="height: 5rem;"></div>
...@@ -89,11 +89,11 @@ export default { ...@@ -89,11 +89,11 @@ export default {
89 handleChange(val) { 89 handleChange(val) {
90 console.log(val); 90 console.log(val);
91 }, 91 },
92 - goToP (item) { // 跳转产品详情 92 + goToDetail (v) { // 跳转产品详情
93 this.$router.push({ 93 this.$router.push({
94 path: '/product/detail', 94 path: '/product/detail',
95 query: { 95 query: {
96 - // id: id 96 + id: v.id
97 } 97 }
98 }); 98 });
99 } 99 }
...@@ -120,28 +120,32 @@ export default { ...@@ -120,28 +120,32 @@ export default {
120 .product-list { 120 .product-list {
121 display: flex; 121 display: flex;
122 flex-wrap: wrap; 122 flex-wrap: wrap;
123 - gap: 1rem;
124 } 123 }
125 .product-item { 124 .product-item {
126 width: calc(33.33% - 1rem); 125 width: calc(33.33% - 1rem);
126 + margin-bottom: 1rem;
127 + margin-right: 1rem;
127 &.xs { 128 &.xs {
128 width: calc(50% - 1rem); 129 width: calc(50% - 1rem);
129 } 130 }
130 } 131 }
131 .product-item-img { 132 .product-item-img {
132 - background-color: #f5f5f5; 133 + background-color: #fff;
133 display: flex; 134 display: flex;
134 align-items: center; 135 align-items: center;
135 justify-content: center; 136 justify-content: center;
136 height: 18rem; 137 height: 18rem;
137 - padding: 3rem; 138 + padding: 2vw;
138 box-sizing: border-box; 139 box-sizing: border-box;
139 border-radius: 8px; 140 border-radius: 8px;
141 + border: 1px solid #eee;
140 } 142 }
141 .product-item-title { 143 .product-item-title {
142 - text-align: center; 144 + // text-align: center;
143 margin-top: 0.75rem; 145 margin-top: 0.75rem;
144 - color: @secondary-color; 146 + color: @text-color;
147 + font-weight: bold;
148 + padding-left: 1rem;
145 &:hover { 149 &:hover {
146 cursor: pointer; 150 cursor: pointer;
147 text-decoration: underline; 151 text-decoration: underline;
......