修改
This commit is contained in:
‘937886381’
223
src/views/home/costComponents/product-Item.vue
Normal file
223
src/views/home/costComponents/product-Item.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<!-- 外层滚动容器：添加鼠标事件监听 -->
|
||||
<div class="coreItem-container" @mousedown="handleMouseDown" @mousemove="handleMouseMove" @mouseup="handleMouseUp"
|
||||
@mouseleave="handleMouseUp" :style="{ cursor: isDragging ? 'grabbing' : 'grab' }">
|
||||
<div class="coreItem">
|
||||
<div class="item" v-for="(item, index) in itemList" :key="index">
|
||||
<div class="item-header">
|
||||
<div class="unit">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<div class="content-wrapper">
|
||||
<!-- 目标值 + 分割线 + 实际值 -->
|
||||
<div class="value-group">
|
||||
<div class="value-item">
|
||||
<div class="number">{{ item.value }}</div>
|
||||
<!-- <div class="title">目标值</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Container",
|
||||
components: {},
|
||||
props: ["name", "size", "icon",'itemList'],
|
||||
data() {
|
||||
return {
|
||||
itemList: [
|
||||
// { unit: "营业收入·万元", targetValue: 16, currentValue: 14.5, progress: 90 },
|
||||
// { unit: "经营性利润·万元", targetValue: 16, currentValue: 15.2, progress: 85 },
|
||||
// { unit: "利润总额·万元", targetValue: 16, currentValue: 15.2, progress: 85 },
|
||||
// { unit: "毛利率·%", targetValue: 16, currentValue: 15.2, progress: 85 },
|
||||
// { unit: "销量·万㎡", targetValue: 20, currentValue: 16, progress: 80 },
|
||||
// { unit: "双镀面板·万㎡", targetValue: 15, currentValue: 13.8, progress: 92 }
|
||||
],
|
||||
// 拖拽相关状态
|
||||
isDragging: false, // 是否正在拖拽
|
||||
startX: 0, // 拖拽开始时的鼠标X坐标
|
||||
scrollLeft: 0 // 拖拽开始时的滚动条位置
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 鼠标按下：开始拖拽
|
||||
handleMouseDown(e) {
|
||||
this.isDragging = true;
|
||||
this.startX = e.pageX - this.$el.offsetLeft; // 记录初始鼠标X坐标（相对容器）
|
||||
this.scrollLeft = this.$el.scrollLeft; // 记录初始滚动位置
|
||||
this.$el.style.userSelect = "none"; // 防止拖拽时选中文字
|
||||
},
|
||||
// 鼠标移动：处理拖拽滚动
|
||||
handleMouseMove(e) {
|
||||
if (!this.isDragging) return;
|
||||
e.preventDefault(); // 阻止默认行为（如选中文本）
|
||||
const x = e.pageX - this.$el.offsetLeft; // 计算当前鼠标X坐标（相对容器）
|
||||
const walk = (x - this.startX) * 1.2; // 计算移动距离（乘以1.2增加灵敏度）
|
||||
this.$el.scrollLeft = this.scrollLeft - walk; // 更新滚动位置
|
||||
},
|
||||
// 鼠标松开/离开：结束拖拽
|
||||
handleMouseUp() {
|
||||
this.isDragging = false;
|
||||
this.$el.style.userSelect = ""; // 恢复文本选择
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.coreItem-container {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
// 隐藏滚动条（保留功能）
|
||||
&::-webkit-scrollbar {
|
||||
height: 0; // 彻底隐藏横向滚动条
|
||||
width: 0;
|
||||
}
|
||||
|
||||
scrollbar-width: none; // Firefox
|
||||
-ms-overflow-style: none; // IE/Edge
|
||||
|
||||
// 拖拽时的光标样式（增强交互体验）
|
||||
cursor: grab;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
.coreItem {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 0 8px;
|
||||
width: fit-content; // 宽度由子项总宽度决定
|
||||
min-width: 100%; // 子项较少时铺满容器
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 280px;
|
||||
height: 80px;
|
||||
background: #f9fcff;
|
||||
padding: 10px 20px 0 27px;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
.item-header {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #333333;
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: calc(100% - 30px);
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.value-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.value-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.middle-line {
|
||||
width: 207px;
|
||||
height: 3px;
|
||||
border: 1px solid;
|
||||
border-image: linear-gradient(109deg, rgba(203, 203, 203, 1), rgba(255, 255, 255, 0)) 1 1;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 600;
|
||||
font-size: 24px;
|
||||
color: #666666;
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
line-height: 1.2;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.progress-yield-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.progress-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-container {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #F5F7FA;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: rgba(98, 213, 180, .7);
|
||||
border-radius: 4px;
|
||||
transition: width 0.5s ease;
|
||||
}
|
||||
|
||||
.yield {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.progress-percent {
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
color: #999999;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.progress-value {
|
||||
color: #28CB97;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user