lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 优化grid视图阴影效果

Browse Source
This commit is contained in:
jmal 2025-07-18 16:03:56 +08:00
parent d00ddf1c19
commit 3765aa57b6
2 changed files with 97 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

178
src/components/ShowFile/ShowFile.vue
View File

@ -351,19 +351,16 @@
</div>
</div>
</el-breadcrumb>
<div>
<!--统计信息-->
<div class="info-statistics">
<div class="info-statistics">
<span v-if="listModeSearch"
>{{ this.pagination['total'] }}个结果:&nbsp;</span
>{{ this.pagination['total'] }}个结果:&nbsp;</span
>
<span v-if="tableLoading">获取更多数据...</span>
<span v-if="!tableLoading">{{
<span v-if="tableLoading">获取更多数据...</span>
<span v-if="!tableLoading">{{
!finished
? '已加载 ' + getSummaries3
: '已全部加载 ' + getSummaries3
}}</span>
</div>
</div>
<!--右键菜单-->
@ -527,85 +524,83 @@
<van-checkbox-group
ref="checkboxGroup"
>
<van-grid
:center="true"
:column-num="gridColumnNum"
:border="false"
:style="{
width: '100%',
maxHeight: clientHeight - 25 + 'px',
minHeight: gridMinHeight + 'px',
rowGap: '10px',
overflow: 'auto',
paddingBottom: '12px',
'box-shadow':
fileListScrollTop > 0
? '-1px -1px 4px #00152914'
: '-1px -1px 4px #ffffff',
}"
>
<van-grid-item
v-for="(item, index) in fileList"
:key="item.id"
:style="{paddingTop: 100/gridColumnNum + '%'}"
<div :class="fileListScrollTop > 0 ? 'shadow-container' : ''">
<van-grid
:center="true"
:column-num="gridColumnNum"
:border="false"
:style="{
width: '100%',
maxHeight: clientHeight - 25 + 'px',
minHeight: gridMinHeight + 'px',
rowGap: '10px',
overflow: 'auto',
paddingBottom: '12px',
}"
>
<div
class="grid-item van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
:style="{
right: gridPaddingRight + 'px',
bottom: '10px',
height: gridItemWidth + 'px',
background: selectRowData.includes(item) ? '#caeaf991' : '',
'background-size': 'cover',
'background-position': 'center',
'box-shadow': selectRowData.includes(item) ? '0 4px 12px var(--apple-shadow-color)' : '',
'transition': 'box-shadow 0.3s ease, transform 0.3s ease;',
border: selectRowData.includes(item)
? 'solid 1px var(--apple-shadow-color)'
: '',
}"
v-tooltip="tooltipConfig(item)"
@click="gridItemClick(item, $event)"
@dblclick="fileClick(item, $event)"
@contextmenu.prevent="rowContextmenu(item)"
>
<div
class="grid-hover-back grid-hover van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
<van-grid-item
v-for="(item, index) in fileList"
:key="item.id"
:style="{paddingTop: 100/gridColumnNum + '%'}"
>
<div class="grid-item-icon">
<icon-file
:item="item"
:image-url="imageUrl"
:audio-cover-url="audioCoverUrl"
:grid="true"
:grid-width="gridItemWidth"
></icon-file>
</div>
<el-input
v-if="item.index === editingIndex"
v-focus
v-model="renameFileName"
class="grid-item-text-input"
placeholder=""
type="textarea"
autosize
size="small"
@focus="
renameInputFocus($event.currentTarget, item.suffix)
"
@blur="setInputBlur()"
@keyup.enter.prevent.native="
rowRename(renameFileName, item)
"
<div
class="grid-item van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
:style="{
right: gridPaddingRight + 'px',
bottom: '10px',
height: gridItemWidth + 'px',
background: selectRowData.includes(item) ? '#caeaf991' : '',
'background-size': 'cover',
'background-position': 'center',
'box-shadow': selectRowData.includes(item) ? '0 4px 12px var(--apple-shadow-color)' : '',
'transition': 'box-shadow 0.3s ease, transform 0.3s ease;',
border: selectRowData.includes(item)
? 'solid 1px var(--apple-shadow-color)'
: '',
}"
v-tooltip="tooltipConfig(item)"
@click="gridItemClick(item, $event)"
@dblclick="fileClick(item, $event)"
@contextmenu.prevent="rowContextmenu(item)"
>
</el-input>
<div v-if="item.index !== editingIndex" class="grid-item-text">
<span>{{ gridFilename(item) }}</span>
<div
class="grid-hover-back grid-hover van-grid-item__content van-grid-item__content--center van-grid-item__content--square"
>
<div class="grid-item-icon">
<icon-file
:item="item"
:image-url="imageUrl"
:audio-cover-url="audioCoverUrl"
:grid="true"
:grid-width="gridItemWidth"
></icon-file>
</div>
<el-input
v-if="item.index === editingIndex"
v-focus
v-model="renameFileName"
class="grid-item-text-input"
placeholder=""
type="textarea"
autosize
size="small"
@focus="
renameInputFocus($event.currentTarget, item.suffix)
"
@blur="setInputBlur()"
@keyup.enter.prevent.native="
rowRename(renameFileName, item)
"
>
</el-input>
<div v-if="item.index !== editingIndex" class="grid-item-text">
<span>{{ gridFilename(item) }}</span>
</div>
</div>
</div>
</div>
</div>
</van-grid-item>
</van-grid>
</van-grid-item>
</van-grid>
</div>
</van-checkbox-group>
</div>
<table class="drag-table" id="drag-table"></table>
@ -4946,6 +4941,25 @@ export default {
justify-content: space-between;
}
.shadow-container {
position: relative;
width: 100%;
overflow: hidden;
background: white;
}
.shadow-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.05) 0px, transparent 4px);
pointer-events: none;
z-index: 10;
}
>>> .van-grid-item__content {
background-size: cover;
background-position: center;

2
src/styles/home-index.scss
View File

@ -283,7 +283,7 @@
}
>>> .van-grid {
padding-left: 20px;
padding: 0 0 0 20px;
}
>>> .van-grid-item__content .svg-icon{