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";
export default {
mixins: [mixin.init],
props: {
// 父组件传递的图片列表
images: {
type: Array,
default: () => [],
},
},
data() {
return {
selectedImage: 0, // 当前选中的图片索引
startIndex: 0, // 当前显示的缩略图起始索引
thumbnailsToShow: 4, // 每次显示4个缩略图
isTransitioning: false, // 控制大图的切换动画
images: [
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
],
};
},
mounted() {},
......
<!--
* @Date: 2024-09-29 14:26:41
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-17 16:43:38
* @LastEditTime: 2024-10-21 16:20:10
* @FilePath: /hager/src/views/product/detail.vue
* @Description: 文件描述
-->
......@@ -20,7 +20,7 @@
<hager-box class="box-n">
<el-row v-if="!is_xs" :gutter="10" style="margin-bottom: 3rem;">
<el-col :span="10">
<hager-carousel></hager-carousel>
<hager-carousel :images="images"></hager-carousel>
</el-col>
<el-col :span="14">
<div class="product-detail-info">
......@@ -71,19 +71,28 @@
<div :class="['button', is_xs ? 'xs' : '', is_active === 3 ? 'active' : '']" @click="onClick(3)">安装教程</div>
</div>
<div v-if="!is_xs">
<div @click="goToDownload" :class="['button', is_download_checked ? 'active' : '']">下载选中</div>
<div @click="goToDownload" :class="['button', is_download_checked ? 'active' : '']">发送到邮箱</div>
</div>
</div>
<div>
<div class="mini-download-wrapper" v-if="is_xs">
<div>
<span @click="checkAll">全选</span>&nbsp;
<span v-if="checked_sum">已选 {{ checked_sum }}</span>
</div>
<div @click="goToDownload" :class="['button', is_download_checked ? 'active' : '']">发送到邮箱</div>
</div>
<div class="info-list" v-for="(item, index) in download_list" :key="index">
<div class="info-list-title">
<i class="el-icon-document" style="font-size: 1.5rem;"></i>&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;{{ item.size }}
</div>
<div class="info-list-control">
<span>预览</span>
<span>直接下载</span>
<i v-if="item.checked" @click="item.checked = !item.checked" class="el-icon-folder-checked download-checked"></i>
<i v-else @click="item.checked = !item.checked" class="el-icon-folder download-unchecked"></i>
<i class="el-icon-document" style="font-size: 1.25rem; margin-left: 1rem;"></i>&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;{{ item.size }}
</div>
<div class="info-list-control">
<div @click="preview(item)">预览</div>
<div @click="sendEmail" class="icon-wrapper">
<img style="height: 1rem;" src="https://cdn.ipadbiz.cn/hager/icon/%E9%82%AE%E4%BB%B6@2x.png">
</div>
</div>
</div>
</div>
......@@ -117,16 +126,20 @@ export default {
checked: false
}],
images: [
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg",
"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
"https://cdn.ipadbiz.cn/hager/img/product/P11.jpg",
"https://cdn.ipadbiz.cn/hager/img/product/t01.jpg",
"https://cdn.ipadbiz.cn/hager/img/product/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240920151453.png",
"https://cdn.ipadbiz.cn/hager/img/product/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20240920151457.png",
]
}
},
computed: {
is_download_checked () {
return this.download_list.filter(item => item.checked).length > 0;
}
},
checked_sum () {
return this.download_list.filter(item => item.checked).length;
},
},
mounted () {
......@@ -137,23 +150,47 @@ export default {
},
goToDownload () {
if (this.is_download_checked) {
MessageBox.prompt('请输入发送邮箱', '温馨提示', {
// 发送邮箱接口
MessageBox.confirm('是否发送到邮箱？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
inputErrorMessage: '邮箱格式不正确'
}).then(({ value }) => {
type: 'warning'
}).then(() => {
Message({
type: 'success',
message: '你的邮箱是: ' + value
message: '发送成功'
});
}).catch(() => {
Message({
type: 'info',
message: '取消输入'
});
});
message: '已取消发送'
})
})
}
},
checkAll () {
this.download_list.forEach(item => item.checked = true);
},
sendEmail () {
// 发送邮箱接口
MessageBox.confirm('是否发送到邮箱？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
Message({
type: 'success',
message: '发送成功'
});
}).catch(() => {
Message({
type: 'info',
message: '已取消发送'
})
})
},
preview (item) {
window.open(item, '_blank');
}
}
}
......@@ -256,7 +293,8 @@ export default {
display: flex;
justify-content: center;
align-items: center;
span {
color: @primary-color;
div {
margin-right: 1rem;
&:hover {
cursor: pointer;
......@@ -264,7 +302,18 @@ export default {
text-decoration: underline;
}
}
.download-checked {
.icon-wrapper {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
img {
max-width: 100%; /* 确保图片不会超出容器 */
height: auto; /* 保持图片的宽高比 */
}
}
}
.download-checked {
font-size: 1.5rem;
color: @primary-color;
&:hover {
......@@ -277,6 +326,22 @@ export default {
cursor: pointer;
}
}
}
.mini-download-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
.button {
background-color: #f3f3f3;
padding: 0.85rem 1rem;
border-radius: 5px;
text-align: center;
&.active {
background-color: @primary-color;
color: #fff;
}
}
}
}
......@@ -287,8 +352,9 @@ export default {
text-align: center;
color: #333;
border-radius: 8px;
background-color: #f3f3f3;
background-color: #FFF;
margin-bottom: 1rem;
border: 1px solid #ebebeb;
}
}
</style>
......
<!--
* @Date: 2024-09-27 16:53:09
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-10-18 17:40:37
* @LastEditTime: 2024-10-21 16:13:58
* @FilePath: /hager/src/views/product/index.vue
* @Description: 文件描述
-->
......@@ -23,7 +23,7 @@
<el-input style="margin-bottom: 0.5rem;" placeholder="请输入产品" prefix-icon="el-icon-search" v-model="search_input"></el-input>
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item v-for="(item, index) in c_list" :key="index" :title="item.title" :name="item.name">
<div @click="goToP(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.name }}</div>
<div @click="goToDetail(c)" v-for="(c, idx) in item.list" :key="idx" class="p-item">{{ c.name }}</div>
</el-collapse-item>
</el-collapse>
</div>
......@@ -32,9 +32,9 @@
<div class="product-list">
<div class="product-item" v-for="(item, index) in 6" :key="index">
<div class="product-item-img">
<el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
<el-image style="width: 100%; height: 100%" src="https://cdn.ipadbiz.cn/hager/img/product/t01.jpg" fit="fit"></el-image>
</div>
<p @click="goToP(item)" class="product-item-title">acb hw 空气断路器</p>
<p @click="goToDetail(item)" class="product-item-title">acb hw 空气断路器</p>
</div>
</div>
<div style="height: 5rem;"></div>
......@@ -42,10 +42,10 @@
</el-row>
<div v-else class="product-list">
<div class="product-item xs" v-for="(item, index) in 6" :key="index">
<div class="product-item-img">
<el-image style="width: 100%; height: 100%;" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fit"></el-image>
<div @click="goToDetail(item)" class="product-item-img xs">
<el-image style="width: 100%; height: 100%" src="https://cdn.ipadbiz.cn/hager/img/product/t01.jpg" fit="fit"></el-image>
</div>
<p @click="goToP(item)" class="product-item-title">acb hw 空气断路器</p>
<p @click="goToDetail(item)" class="product-item-title">acb hw 空气断路器</p>
</div>
</div>
<div style="height: 5rem;"></div>
......@@ -89,11 +89,11 @@ export default {
handleChange(val) {
console.log(val);
},
goToP (item) { // 跳转产品详情
goToDetail (v) { // 跳转产品详情
this.$router.push({
path: '/product/detail',
query: {
// id: id
id: v.id
}
});
}
......@@ -120,28 +120,32 @@ export default {
.product-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.product-item {
width: calc(33.33% - 1rem);
margin-bottom: 1rem;
margin-right: 1rem;
&.xs {
width: calc(50% - 1rem);
}
}
.product-item-img {
background-color: #f5f5f5;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
height: 18rem;
padding: 3rem;
padding: 2vw;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid #eee;
}
.product-item-title {
text-align: center;
// text-align: center;
margin-top: 0.75rem;
color: @secondary-color;
color: @text-color;
font-weight: bold;
padding-left: 1rem;
&:hover {
cursor: pointer;
text-decoration: underline;
......