Skip to content

G
gk
Commit 5ca37ef8 authored by daniel's avatar daniel
Browse files
Options

feat(iconPicker): 切换为线上地址

parent 4b98e0d0
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 140 additions and 70 deletions
src/main/webapp/WEB-INF/views/cmpt/outter-link.jsp
View file @ 5ca37ef8
...@@ -209,16 +209,21 @@ ...@@ -209,16 +209,21 @@
/* 图标选择器弹框 */ /* 图标选择器弹框 */
.icon-picker-mask { .icon-picker-mask {
position: fixed; position: fixed;
top: 0; left: 0; top: 0;
width: 100%; height: 100%; left: 0;
background: rgba(0,0,0,0.5); width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 200; z-index: 200;
} }
.icon-picker-dialog { .icon-picker-dialog {
position: fixed; position: fixed;
top: 50%; left: 50%; top: 50%;
left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 720px; height: 520px; width: 720px;
height: 520px;
background: #fff; background: #fff;
border-radius: 8px; border-radius: 8px;
z-index: 201; z-index: 201;
...@@ -226,6 +231,7 @@ ...@@ -226,6 +231,7 @@
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
} }
.icon-picker-header { .icon-picker-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -235,23 +241,30 @@ ...@@ -235,23 +241,30 @@
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
} }
.icon-picker-close { .icon-picker-close {
cursor: pointer; cursor: pointer;
font-size: 22px; font-size: 22px;
color: #999; color: #999;
} }
.icon-picker-close:hover { color: #333; }
.icon-picker-close:hover {
color: #333;
}
.icon-picker-body { .icon-picker-body {
display: flex; display: flex;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
} }
.icon-picker-cats { .icon-picker-cats {
width: 160px; width: 160px;
border-right: 1px solid #eee; border-right: 1px solid #eee;
overflow-y: auto; overflow-y: auto;
flex-shrink: 0; flex-shrink: 0;
} }
.icon-picker-cat { .icon-picker-cat {
padding: 12px 16px; padding: 12px 16px;
cursor: pointer; cursor: pointer;
...@@ -260,13 +273,18 @@ ...@@ -260,13 +273,18 @@
border-left: 3px solid transparent; border-left: 3px solid transparent;
transition: all .2s; transition: all .2s;
} }
.icon-picker-cat:hover { background: #f5f5f5; }
.icon-picker-cat:hover {
background: #f5f5f5;
}
.icon-picker-cat.active { .icon-picker-cat.active {
background: #fff5f5; background: #fff5f5;
border-left-color: #ce3939; border-left-color: #ce3939;
color: #ce3939; color: #ce3939;
font-weight: 500; font-weight: 500;
} }
.icon-picker-icons { .icon-picker-icons {
flex: 1; flex: 1;
padding: 16px; padding: 16px;
...@@ -276,8 +294,10 @@ ...@@ -276,8 +294,10 @@
align-content: flex-start; align-content: flex-start;
gap: 12px; gap: 12px;
} }
.icon-picker-item { .icon-picker-item {
width: 72px; height: 72px; width: 72px;
height: 72px;
border: 2px solid #eee; border: 2px solid #eee;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
...@@ -287,15 +307,18 @@ ...@@ -287,15 +307,18 @@
transition: all .2s; transition: all .2s;
overflow: hidden; overflow: hidden;
} }
.icon-picker-item:hover { .icon-picker-item:hover {
border-color: #ce3939; border-color: #ce3939;
box-shadow: 0 0 6px rgba(206,57,57,0.2); box-shadow: 0 0 6px rgba(206, 57, 57, 0.2);
} }
.icon-picker-item img { .icon-picker-item img {
max-width: 60px; max-width: 60px;
max-height: 60px; max-height: 60px;
object-fit: contain; object-fit: contain;
} }
.icon-picker-empty { .icon-picker-empty {
width: 100%; width: 100%;
text-align: center; text-align: center;
...@@ -303,6 +326,7 @@ ...@@ -303,6 +326,7 @@
padding-top: 60px; padding-top: 60px;
font-size: 14px; font-size: 14px;
} }
.btn-pick-icon { .btn-pick-icon {
display: inline-block; display: inline-block;
padding: 6px 16px; padding: 6px 16px;
...@@ -314,7 +338,10 @@ ...@@ -314,7 +338,10 @@
margin-left: 10px; margin-left: 10px;
vertical-align: middle; vertical-align: middle;
} }
.btn-pick-icon:hover { background: #b52e2e; }
.btn-pick-icon:hover {
background: #b52e2e;
}
</style> </style>
</head> </head>
...@@ -503,7 +530,8 @@ ...@@ -503,7 +530,8 @@
</div> </div>
<!-- 图标选择器弹框 --> <!-- 图标选择器弹框 -->
<div class="icon-picker-mask" v-show="iconPickerVisible" @click.self="iconPickerVisible=false"></div> <div class="icon-picker-mask" v-show="iconPickerVisible"
@click.self="iconPickerVisible=false"></div>
<div class="icon-picker-dialog" v-show="iconPickerVisible"> <div class="icon-picker-dialog" v-show="iconPickerVisible">
<div class="icon-picker-header"> <div class="icon-picker-header">
<span>选择图标</span> <span>选择图标</span>
...@@ -511,21 +539,16 @@ ...@@ -511,21 +539,16 @@
</div> </div>
<div class="icon-picker-body"> <div class="icon-picker-body">
<div class="icon-picker-cats"> <div class="icon-picker-cats">
<div class="icon-picker-cat" <div class="icon-picker-cat" v-for="cat in iconCategories" :key="cat.id"
v-for="cat in iconCategories" :class="{active: iconActiveCatId === cat.id}"
:key="cat.id" @click="selectCategory(cat.id)">
:class="{active: iconActiveCatId === cat.id}"
@click="selectCategory(cat.id)">
{{cat.name}} {{cat.name}}
</div> </div>
</div> </div>
<div class="icon-picker-icons"> <div class="icon-picker-icons">
<div v-if="iconList.length === 0" class="icon-picker-empty">暂无图标</div> <div v-if="iconList.length === 0" class="icon-picker-empty">暂无图标</div>
<div class="icon-picker-item" <div class="icon-picker-item" v-for="icon in iconList" :key="icon.id"
v-for="icon in iconList" :style="{background: iconBgColor}" @click="pickIcon(icon.url)">
:key="icon.id"
:style="{background: iconBgColor}"
@click="pickIcon(icon.url)">
<img :src="icon.url" :alt="icon.name" :title="icon.name" /> <img :src="icon.url" :alt="icon.name" :title="icon.name" />
</div> </div>
</div> </div>
...@@ -896,7 +919,7 @@ ...@@ -896,7 +919,7 @@
}, },
fetchIconCategories: function () { fetchIconCategories: function () {
$.ajax({ $.ajax({
url: 'http://localhost:8081/assistant/v1/icon-category/list', url: 'https://titan.geexek.com/assistant/v1/icon-category/list',
type: 'post', type: 'post',
contentType: 'application/json', contentType: 'application/json',
data: JSON.stringify({ status: 1 }), data: JSON.stringify({ status: 1 }),
...@@ -912,7 +935,7 @@ ...@@ -912,7 +935,7 @@
selectCategory: function (catId) { selectCategory: function (catId) {
this.iconActiveCatId = catId; this.iconActiveCatId = catId;
$.ajax({ $.ajax({
url: 'http://localhost:8081/assistant/v1/icon/list', url: 'https://titan.geexek.com/assistant/v1/icon/list',
type: 'post', type: 'post',
contentType: 'application/json', contentType: 'application/json',
data: JSON.stringify({ categoryId: catId, status: 1 }), data: JSON.stringify({ categoryId: catId, status: 1 }),
......
src/main/webapp/WEB-INF/views/cmpt/service.jsp
View file @ 5ca37ef8
...@@ -250,16 +250,21 @@ ...@@ -250,16 +250,21 @@
/* 图标选择器弹框 */ /* 图标选择器弹框 */
.icon-picker-mask { .icon-picker-mask {
position: fixed; position: fixed;
top: 0; left: 0; top: 0;
width: 100%; height: 100%; left: 0;
background: rgba(0,0,0,0.5); width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 200; z-index: 200;
} }
.icon-picker-dialog { .icon-picker-dialog {
position: fixed; position: fixed;
top: 50%; left: 50%; top: 50%;
left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 720px; height: 520px; width: 720px;
height: 520px;
background: #fff; background: #fff;
border-radius: 8px; border-radius: 8px;
z-index: 201; z-index: 201;
...@@ -267,6 +272,7 @@ ...@@ -267,6 +272,7 @@
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
} }
.icon-picker-header { .icon-picker-header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
...@@ -276,23 +282,30 @@ ...@@ -276,23 +282,30 @@
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
} }
.icon-picker-close { .icon-picker-close {
cursor: pointer; cursor: pointer;
font-size: 22px; font-size: 22px;
color: #999; color: #999;
} }
.icon-picker-close:hover { color: #333; }
.icon-picker-close:hover {
color: #333;
}
.icon-picker-body { .icon-picker-body {
display: flex; display: flex;
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
} }
.icon-picker-cats { .icon-picker-cats {
width: 160px; width: 160px;
border-right: 1px solid #eee; border-right: 1px solid #eee;
overflow-y: auto; overflow-y: auto;
flex-shrink: 0; flex-shrink: 0;
} }
.icon-picker-cat { .icon-picker-cat {
padding: 12px 16px; padding: 12px 16px;
cursor: pointer; cursor: pointer;
...@@ -301,13 +314,18 @@ ...@@ -301,13 +314,18 @@
border-left: 3px solid transparent; border-left: 3px solid transparent;
transition: all .2s; transition: all .2s;
} }
.icon-picker-cat:hover { background: #f5f5f5; }
.icon-picker-cat:hover {
background: #f5f5f5;
}
.icon-picker-cat.active { .icon-picker-cat.active {
background: #fff5f5; background: #fff5f5;
border-left-color: #ce3939; border-left-color: #ce3939;
color: #ce3939; color: #ce3939;
font-weight: 500; font-weight: 500;
} }
.icon-picker-icons { .icon-picker-icons {
flex: 1; flex: 1;
padding: 16px; padding: 16px;
...@@ -317,8 +335,10 @@ ...@@ -317,8 +335,10 @@
align-content: flex-start; align-content: flex-start;
gap: 12px; gap: 12px;
} }
.icon-picker-item { .icon-picker-item {
width: 72px; height: 72px; width: 72px;
height: 72px;
border: 2px solid #eee; border: 2px solid #eee;
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
...@@ -328,15 +348,18 @@ ...@@ -328,15 +348,18 @@
transition: all .2s; transition: all .2s;
overflow: hidden; overflow: hidden;
} }
.icon-picker-item:hover { .icon-picker-item:hover {
border-color: #ce3939; border-color: #ce3939;
box-shadow: 0 0 6px rgba(206,57,57,0.2); box-shadow: 0 0 6px rgba(206, 57, 57, 0.2);
} }
.icon-picker-item img { .icon-picker-item img {
max-width: 60px; max-width: 60px;
max-height: 60px; max-height: 60px;
object-fit: contain; object-fit: contain;
} }
.icon-picker-empty { .icon-picker-empty {
width: 100%; width: 100%;
text-align: center; text-align: center;
...@@ -344,6 +367,7 @@ ...@@ -344,6 +367,7 @@
padding-top: 60px; padding-top: 60px;
font-size: 14px; font-size: 14px;
} }
.btn-pick-icon { .btn-pick-icon {
display: inline-block; display: inline-block;
padding: 6px 16px; padding: 6px 16px;
...@@ -355,7 +379,10 @@ ...@@ -355,7 +379,10 @@
margin-left: 10px; margin-left: 10px;
vertical-align: middle; vertical-align: middle;
} }
.btn-pick-icon:hover { background: #b52e2e; }
.btn-pick-icon:hover {
background: #b52e2e;
}
</style> </style>
</head> </head>
...@@ -666,7 +693,8 @@ ...@@ -666,7 +693,8 @@
</div> </div>
<!-- 图标选择器弹框 --> <!-- 图标选择器弹框 -->
<div class="icon-picker-mask" v-show="iconPickerVisible" @click.self="iconPickerVisible=false"></div> <div class="icon-picker-mask" v-show="iconPickerVisible"
@click.self="iconPickerVisible=false"></div>
<div class="icon-picker-dialog" v-show="iconPickerVisible"> <div class="icon-picker-dialog" v-show="iconPickerVisible">
<div class="icon-picker-header"> <div class="icon-picker-header">
<span>选择图标</span> <span>选择图标</span>
...@@ -674,21 +702,16 @@ ...@@ -674,21 +702,16 @@
</div> </div>
<div class="icon-picker-body"> <div class="icon-picker-body">
<div class="icon-picker-cats"> <div class="icon-picker-cats">
<div class="icon-picker-cat" <div class="icon-picker-cat" v-for="cat in iconCategories" :key="cat.id"
v-for="cat in iconCategories" :class="{active: iconActiveCatId === cat.id}"
:key="cat.id" @click="selectCategory(cat.id)">
:class="{active: iconActiveCatId === cat.id}"
@click="selectCategory(cat.id)">
{{cat.name}} {{cat.name}}
</div> </div>
</div> </div>
<div class="icon-picker-icons"> <div class="icon-picker-icons">
<div v-if="iconList.length === 0" class="icon-picker-empty">暂无图标</div> <div v-if="iconList.length === 0" class="icon-picker-empty">暂无图标</div>
<div class="icon-picker-item" <div class="icon-picker-item" v-for="icon in iconList" :key="icon.id"
v-for="icon in iconList" :style="{background: iconBgColor}" @click="pickIcon(icon.url)">
:key="icon.id"
:style="{background: iconBgColor}"
@click="pickIcon(icon.url)">
<img :src="icon.url" :alt="icon.name" :title="icon.name" /> <img :src="icon.url" :alt="icon.name" :title="icon.name" />
</div> </div>
</div> </div>
...@@ -1260,7 +1283,7 @@ ...@@ -1260,7 +1283,7 @@
}, },
fetchIconCategories: function () { fetchIconCategories: function () {
$.ajax({ $.ajax({
url: 'http://localhost:8081/assistant/v1/icon-category/list', url: 'https://titan.geexek.com/assistant/v1/icon-category/list',
type: 'post', type: 'post',
contentType: 'application/json', contentType: 'application/json',
data: JSON.stringify({ status: 1 }), data: JSON.stringify({ status: 1 }),
...@@ -1276,7 +1299,7 @@ ...@@ -1276,7 +1299,7 @@
selectCategory: function (catId) { selectCategory: function (catId) {
this.iconActiveCatId = catId; this.iconActiveCatId = catId;
$.ajax({ $.ajax({
url: 'http://localhost:8081/assistant/v1/icon/list', url: 'https://titan.geexek.com/assistant/v1/icon/list',
type: 'post', type: 'post',
contentType: 'application/json', contentType: 'application/json',
data: JSON.stringify({ categoryId: catId, status: 1 }), data: JSON.stringify({ categoryId: catId, status: 1 }),
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment