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

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

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