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