mirror of
https://github.com/ArvinLovegood/go-stock.git
synced 2025-07-19 00:00:09 +08:00
feat(frontend):增加已关注股票和基金的快速定位功能，闪烁显示效果
- 在 fund.vue 和 stock.vue 中添加了闪烁边框效果，用于突出显示选中的股票和基金- 实现了滚动到指定元素并添加闪烁效果的 blinkBorder函数 - 在选择股票和基金时调用该函数，以达到视觉提示的效果 - 更新了 CSS 样式，添加了 .blink-border 类以实现闪烁动画
This commit is contained in:
ArvinLovegood
parent
f48aa837a9
commit
b4c513a585
@ -429,7 +429,7 @@ func (receiver StockDataApi) GetStockList(key string) []StockBasic {
|
||||
db.Dao.Model(&models.StockInfoHK{}).Where("name like ? or code like ?", "%"+key+"%", "%"+key+"%").Find(&result3)
|
||||
|
||||
var result4 []models.StockInfoUS
|
||||
db.Dao.Model(&models.StockInfoUS{}).Where("name like ? or code like ?", "%"+key+"%", "%"+key+"%").Find(&result4)
|
||||
db.Dao.Model(&models.StockInfoUS{}).Where("name like ? or code like ? or e_name like ?", "%"+key+"%", "%"+key+"%", "%"+key+"%").Find(&result4)
|
||||
|
||||
for _, item := range result2 {
|
||||
result = append(result, StockBasic{
|
||||
|
||||
@ -132,6 +132,7 @@ function getFundList(value){
|
||||
}
|
||||
function onSelectFund(value){
|
||||
data.code=value
|
||||
blinkBorder(value)
|
||||
}
|
||||
function formatterTitle(title){
|
||||
return () => h(NEllipsis,{
|
||||
@ -156,14 +157,34 @@ function newchart(code,name){
|
||||
data.code=code
|
||||
data.fenshiURL='https://image.sinajs.cn/newchart/v5/fund/nav/ss/'+code+'.gif'+"?t="+Date.now()
|
||||
}
|
||||
|
||||
function blinkBorder(findId){
|
||||
// 获取要滚动到的元素
|
||||
const element = document.getElementById(findId);
|
||||
if (element) {
|
||||
// 滚动到该元素
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
const pelement = document.getElementById(findId +'_gi');
|
||||
if(pelement){
|
||||
// 添加闪烁效果
|
||||
pelement.classList.add('blink-border');
|
||||
// 3秒后移除闪烁效果
|
||||
setTimeout(() => {
|
||||
pelement.classList.remove('blink-border');
|
||||
}, 1000*5);
|
||||
}else{
|
||||
console.error(`Element with ID ${findId}_gi not found`);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<vue-danmaku v-model:danmus="danmus" style="height:100px; width:100%;z-index: 9;position:absolute; top: 400px; pointer-events: none;" ></vue-danmaku>
|
||||
<n-flex justify="start" >
|
||||
<n-grid :x-gap="8" :cols="3" :y-gap="8" >
|
||||
<n-gi v-for="info in followList" style="margin-left: 2px" onmouseover="this.style.border='1px solid #3498db' " onmouseout="this.style.border='0px'">
|
||||
<n-card :title="formatterTitle(info.name)">
|
||||
<n-gi :id="info.code+'_gi'" v-for="info in followList" style="margin-left: 2px" onmouseover="this.style.border='1px solid #3498db' " onmouseout="this.style.border='0px'">
|
||||
<n-card :id="info.code" :title="formatterTitle(info.name)">
|
||||
<template #header-extra>
|
||||
<n-tag size="small" :bordered="false" type="info">{{info.code}}</n-tag>
|
||||
<n-tag size="small" :bordered="false" type="success" @click="unFollow(info.code)"> 取消关注</n-tag>
|
||||
@ -228,5 +249,21 @@ function newchart(code,name){
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* 添加闪烁效果的CSS类 */
|
||||
.blink-border {
|
||||
animation: blink-border 1s linear infinite;
|
||||
border: 4px solid transparent;
|
||||
}
|
||||
|
||||
@keyframes blink-border {
|
||||
0% {
|
||||
border-color: red;
|
||||
}
|
||||
50% {
|
||||
border-color: transparent;
|
||||
}
|
||||
100% {
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -391,6 +391,40 @@ function getStockList(value){
|
||||
if(value&&value.indexOf("-")<=0){
|
||||
data.code=value
|
||||
}
|
||||
|
||||
console.log("getStockList-options",data.code)
|
||||
|
||||
if(data.code){
|
||||
let findId=data.code
|
||||
if(findId.startsWith("us")){
|
||||
findId="gb_"+ findId.replace("us", "").toLowerCase()
|
||||
}
|
||||
blinkBorder(findId)
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function blinkBorder(findId){
|
||||
// 获取要滚动到的元素
|
||||
const element = document.getElementById(findId);
|
||||
if (element) {
|
||||
// 滚动到该元素
|
||||
element.scrollIntoView({ behavior: 'smooth' });
|
||||
const pelement = document.getElementById(findId +'_gi');
|
||||
if(pelement){
|
||||
// 添加闪烁效果
|
||||
pelement.classList.add('blink-border');
|
||||
// 3秒后移除闪烁效果
|
||||
setTimeout(() => {
|
||||
pelement.classList.remove('blink-border');
|
||||
}, 1000*5);
|
||||
}else{
|
||||
console.error(`Element with ID ${findId}_gi not found`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function updateData(result) {
|
||||
@ -783,8 +817,8 @@ function share(code,name){
|
||||
<template>
|
||||
<vue-danmaku v-model:danmus="danmus" style="height:100px; width:100%;z-index: 9;position:absolute; top: 400px; pointer-events: none;" ></vue-danmaku>
|
||||
<n-grid :x-gap="8" :cols="3" :y-gap="8" >
|
||||
<n-gi v-for="result in sortedResults" style="margin-left: 2px" onmouseover="this.style.border='1px solid #3498db' " onmouseout="this.style.border='0px'">
|
||||
<n-card :data-code="result['股票代码']" :bordered="false" :title="result['股票名称']" :closable="false" @close="removeMonitor(result['股票代码'],result['股票名称'],result.key)">
|
||||
<n-gi :id="result['股票代码']+'_gi'" v-for="result in sortedResults" style="margin-left: 2px;" onmouseover="this.style.border='1px solid #3498db' " onmouseout="this.style.border='1px'">
|
||||
<n-card :id="result['股票代码']" :data-code="result['股票代码']" :bordered="false" :title="result['股票名称']" :closable="false" @close="removeMonitor(result['股票代码'],result['股票名称'],result.key)">
|
||||
<n-grid :cols="1" :y-gap="6">
|
||||
<n-gi>
|
||||
<n-text :type="result.type" >
|
||||
@ -965,4 +999,21 @@ function share(code,name){
|
||||
.md-editor-preview p{
|
||||
text-align: left !important;
|
||||
}
|
||||
/* 添加闪烁效果的CSS类 */
|
||||
.blink-border {
|
||||
animation: blink-border 1s linear infinite;
|
||||
border: 4px solid transparent;
|
||||
}
|
||||
|
||||
@keyframes blink-border {
|
||||
0% {
|
||||
border-color: red;
|
||||
}
|
||||
50% {
|
||||
border-color: transparent;
|
||||
}
|
||||
100% {
|
||||
border-color: red;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user