1
This commit is contained in:
张成
@@ -1247,7 +1247,7 @@ input[type="text"].search {
|
||||
border-bottom: 1px solid #F5F5F5;
|
||||
}
|
||||
|
||||
#.headerMobileMenu>div.menuContent>ul>li>ul.subMenu>li:last-child {
|
||||
.headerMobileMenu>div.menuContent>ul>li>ul.subMenu>li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@@ -1290,7 +1290,7 @@ div.googleMap {
|
||||
/* IE6-9 */
|
||||
-webkit-filter: grayscale(99%);
|
||||
/* Chrome 19+ & Safari 6+ */
|
||||
-webkit-backface?visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
/* Fix for transition flickering */
|
||||
}
|
||||
|
||||
@@ -1359,7 +1359,7 @@ div.googleMap {
|
||||
}
|
||||
|
||||
|
||||
/* SMALLER LAPTOPS */
|
||||
/* SMALL LAPTOPS */
|
||||
|
||||
@media only screen and (max-width: 1400px) {
|
||||
table.mainMenu {
|
||||
@@ -1377,7 +1377,7 @@ div.googleMap {
|
||||
}
|
||||
|
||||
|
||||
/* SMALLER LAPTOPS */
|
||||
/* SMALL LAPTOPS */
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.footer>.row1 table.footerTable {
|
||||
@@ -1841,4 +1841,738 @@ div.googleMap {
|
||||
}
|
||||
|
||||
|
||||
/* END MEDIA QUERIES */
|
||||
/* END MEDIA QUERIES */
|
||||
|
||||
/* 现代化全局样式 */
|
||||
|
||||
/* 基础重置 */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'ProximaNova-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #2c3e50;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* 现代化按钮样式 */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 12px 24px;
|
||||
background: linear-gradient(135deg, #3498db, #2980b9);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 25px;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 15px rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(52, 152, 219, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: linear-gradient(135deg, #95a5a6, #7f8c8d);
|
||||
box-shadow: 0 4px 15px rgba(149, 165, 166, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
box-shadow: 0 6px 20px rgba(149, 165, 166, 0.4);
|
||||
}
|
||||
|
||||
/* 现代化卡片样式 */
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
padding: 30px;
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* 现代化输入框样式 */
|
||||
.input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 2px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.input:focus {
|
||||
outline: none;
|
||||
border-color: #3498db;
|
||||
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
|
||||
}
|
||||
|
||||
/* 现代化标签样式 */
|
||||
.label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
/* 现代化表格样式 */
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 15px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.table th {
|
||||
background: #f8f9fa;
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.table tr:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
/* 现代化列表样式 */
|
||||
.list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
background: #f8f9fa;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.list-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* 现代化徽章样式 */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border-radius: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.badge-success {
|
||||
background: #27ae60;
|
||||
}
|
||||
|
||||
.badge-warning {
|
||||
background: #f39c12;
|
||||
}
|
||||
|
||||
.badge-danger {
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
/* 现代化进度条样式 */
|
||||
.progress {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: #e9ecef;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #3498db, #9b59b6);
|
||||
border-radius: 4px;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* 现代化加载动画 */
|
||||
.loading {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #3498db;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* 现代化工具提示 */
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tooltip .tooltip-text {
|
||||
visibility: hidden;
|
||||
width: 200px;
|
||||
background: #2c3e50;
|
||||
color: white;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.tooltip:hover .tooltip-text {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 现代化模态框样式 */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
.modal.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: white;
|
||||
margin: 5% auto;
|
||||
padding: 30px;
|
||||
border-radius: 15px;
|
||||
width: 90%;
|
||||
max-width: 600px;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
|
||||
animation: modalSlideIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes modalSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 现代化通知样式 */
|
||||
.notification {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 15px 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||
border-left: 4px solid #3498db;
|
||||
z-index: 1000;
|
||||
animation: slideInRight 0.3s ease;
|
||||
}
|
||||
|
||||
.notification.success {
|
||||
border-left-color: #27ae60;
|
||||
}
|
||||
|
||||
.notification.warning {
|
||||
border-left-color: #f39c12;
|
||||
}
|
||||
|
||||
.notification.error {
|
||||
border-left-color: #e74c3c;
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* 现代化分页样式 */
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.pagination-item {
|
||||
padding: 10px 15px;
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 6px;
|
||||
text-decoration: none;
|
||||
color: #2c3e50;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.pagination-item:hover,
|
||||
.pagination-item.active {
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border-color: #3498db;
|
||||
}
|
||||
|
||||
/* 现代化面包屑导航 */
|
||||
.breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 20px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
color: #6c757d;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.breadcrumb-item:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.breadcrumb-item.active {
|
||||
color: #2c3e50;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 现代化标签页样式 */
|
||||
.tabs {
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.tab-list {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.tab-link {
|
||||
display: block;
|
||||
padding: 12px 20px;
|
||||
text-decoration: none;
|
||||
color: #6c757d;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-link:hover {
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.tab-link.active {
|
||||
color: #3498db;
|
||||
border-bottom-color: #3498db;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
/* 现代化折叠面板样式 */
|
||||
.accordion {
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.accordion-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.accordion-header {
|
||||
padding: 15px 20px;
|
||||
background: #f8f9fa;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.accordion-header:hover {
|
||||
background: #e9ecef;
|
||||
}
|
||||
|
||||
.accordion-title {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.accordion-icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.accordion-header.active .accordion-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.accordion-content {
|
||||
padding: 0 20px;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.accordion-header.active + .accordion-content {
|
||||
padding: 20px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
/* 现代化滑块样式 */
|
||||
.slider {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
background: #e9ecef;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #3498db;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #3498db;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
box-shadow: 0 2px 6px rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
/* 现代化开关样式 */
|
||||
.switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 60px;
|
||||
height: 34px;
|
||||
}
|
||||
|
||||
.switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider-switch {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
transition: 0.4s;
|
||||
border-radius: 34px;
|
||||
}
|
||||
|
||||
.slider-switch:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
left: 4px;
|
||||
bottom: 4px;
|
||||
background-color: white;
|
||||
transition: 0.4s;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
input:checked + .slider-switch {
|
||||
background-color: #3498db;
|
||||
}
|
||||
|
||||
input:checked + .slider-switch:before {
|
||||
transform: translateX(26px);
|
||||
}
|
||||
|
||||
/* 响应式工具类 */
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.visible {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
content: "";
|
||||
clear: both;
|
||||
display: table;
|
||||
}
|
||||
|
||||
/* 现代化间距工具类 */
|
||||
.m-0 { margin: 0 !important; }
|
||||
.m-1 { margin: 0.25rem !important; }
|
||||
.m-2 { margin: 0.5rem !important; }
|
||||
.m-3 { margin: 1rem !important; }
|
||||
.m-4 { margin: 1.5rem !important; }
|
||||
.m-5 { margin: 3rem !important; }
|
||||
|
||||
.p-0 { padding: 0 !important; }
|
||||
.p-1 { padding: 0.25rem !important; }
|
||||
.p-2 { padding: 0.5rem !important; }
|
||||
.p-3 { padding: 1rem !important; }
|
||||
.p-4 { padding: 1.5rem !important; }
|
||||
.p-5 { padding: 3rem !important; }
|
||||
|
||||
/* 现代化颜色工具类 */
|
||||
.text-primary { color: #3498db !important; }
|
||||
.text-success { color: #27ae60 !important; }
|
||||
.text-warning { color: #f39c12 !important; }
|
||||
.text-danger { color: #e74c3c !important; }
|
||||
.text-info { color: #17a2b8 !important; }
|
||||
.text-light { color: #6c757d !important; }
|
||||
.text-dark { color: #2c3e50 !important; }
|
||||
|
||||
.bg-primary { background-color: #3498db !important; }
|
||||
.bg-success { background-color: #27ae60 !important; }
|
||||
.bg-warning { background-color: #f39c12 !important; }
|
||||
.bg-danger { background-color: #e74c3c !important; }
|
||||
.bg-info { background-color: #17a2b8 !important; }
|
||||
.bg-light { background-color: #f8f9fa !important; }
|
||||
.bg-dark { background-color: #2c3e50 !important; }
|
||||
|
||||
/* 现代化阴影工具类 */
|
||||
.shadow-sm { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; }
|
||||
.shadow { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; }
|
||||
.shadow-lg { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important; }
|
||||
.shadow-xl { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important; }
|
||||
|
||||
/* 现代化圆角工具类 */
|
||||
.rounded { border-radius: 0.375rem !important; }
|
||||
.rounded-sm { border-radius: 0.25rem !important; }
|
||||
.rounded-lg { border-radius: 0.5rem !important; }
|
||||
.rounded-xl { border-radius: 0.75rem !important; }
|
||||
.rounded-full { border-radius: 9999px !important; }
|
||||
|
||||
/* 现代化过渡工具类 */
|
||||
.transition { transition: all 0.3s ease !important; }
|
||||
.transition-fast { transition: all 0.15s ease !important; }
|
||||
.transition-slow { transition: all 0.5s ease !important; }
|
||||
|
||||
/* 现代化变换工具类 */
|
||||
.transform { transform: none !important; }
|
||||
.scale-95 { transform: scale(0.95) !important; }
|
||||
.scale-105 { transform: scale(1.05) !important; }
|
||||
.rotate-90 { transform: rotate(90deg) !important; }
|
||||
.rotate-180 { transform: rotate(180deg) !important; }
|
||||
|
||||
/* 响应式断点 */
|
||||
@media (max-width: 576px) {
|
||||
.container {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
margin: 10% auto;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.tabs .tab-list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
margin-right: 0;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 现代化滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #c1c1c1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #a8a8a8;
|
||||
}
|
||||
|
||||
/* 现代化选择文本样式 */
|
||||
::selection {
|
||||
background: rgba(52, 152, 219, 0.3);
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: rgba(52, 152, 219, 0.3);
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
/* 现代化焦点样式 */
|
||||
:focus {
|
||||
outline: 2px solid #3498db;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* 现代化禁用状态样式 */
|
||||
.disabled,
|
||||
[disabled] {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 现代化加载状态样式 */
|
||||
.loading-state {
|
||||
position: relative;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.loading-state::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loading-state::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: -10px 0 0 -10px;
|
||||
border: 2px solid #f3f3f3;
|
||||
border-top: 2px solid #3498db;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
z-index: 1;
|
||||
}
|
||||
@@ -1,34 +1,424 @@
|
||||
/*PAGE*/
|
||||
|
||||
/* 使用 CSS 自定义属性定义响应式断点 */
|
||||
:root {
|
||||
/* 响应式断点 */
|
||||
--breakpoint-xs: 380px;
|
||||
--breakpoint-sm: 480px;
|
||||
--breakpoint-md: 620px;
|
||||
--breakpoint-lg: 768px;
|
||||
--breakpoint-xl: 992px;
|
||||
--breakpoint-xxl: 1200px;
|
||||
--breakpoint-xxxl: 1500px;
|
||||
--breakpoint-xxxxl: 1600px;
|
||||
|
||||
/* 间距变量 */
|
||||
--spacing-xs: 0.5em;
|
||||
--spacing-sm: 1em;
|
||||
--spacing-md: 1.5em;
|
||||
--spacing-lg: 2em;
|
||||
--spacing-xl: 3em;
|
||||
--spacing-xxl: 4em;
|
||||
--spacing-xxxl: 5em;
|
||||
--spacing-xxxxl: 7em;
|
||||
|
||||
/* 字体大小变量 */
|
||||
--font-size-xs: 0.9em;
|
||||
--font-size-sm: 1.2em;
|
||||
--font-size-md: 1.5em;
|
||||
--font-size-lg: 2.5em;
|
||||
--font-size-xl: 3em;
|
||||
|
||||
/* 布局变量 */
|
||||
--sidebar-width: 25%;
|
||||
--content-width: 75%;
|
||||
--content-padding: 4em;
|
||||
--sidebar-padding: 5em;
|
||||
}
|
||||
|
||||
.contentPage {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
margin: 0 auto 0 auto;
|
||||
padding-top: 7em;
|
||||
margin: 0 auto;
|
||||
padding-top: var(--spacing-xxxxl);
|
||||
min-height: 100vh;
|
||||
|
||||
/* 容器查询支持 */
|
||||
container-type: inline-size;
|
||||
container-name: content-page;
|
||||
}
|
||||
|
||||
|
||||
/* CONTENT TABLES */
|
||||
|
||||
.contentTableLeft {
|
||||
width: 25%;
|
||||
padding-left: 5em;
|
||||
padding-top: 3em;
|
||||
width: var(--sidebar-width);
|
||||
padding-left: var(--sidebar-padding);
|
||||
padding-top: var(--spacing-xl);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.contentTableRight {
|
||||
width: 75%;
|
||||
width: var(--content-width);
|
||||
padding-top: 3.5em;
|
||||
padding-left: 4.0em;
|
||||
padding-right: 4.0em;
|
||||
padding-left: var(--content-padding);
|
||||
padding-right: var(--content-padding);
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* 使用容器查询替代媒体查询 */
|
||||
@container content-page (max-width: 1600px) {
|
||||
.contentTableRight {
|
||||
padding-right: 8em;
|
||||
}
|
||||
}
|
||||
|
||||
/* END CONTENT TABLES */
|
||||
@container content-page (max-width: 1500px) {
|
||||
.contentTableRight {
|
||||
padding-right: 6em;
|
||||
}
|
||||
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
}
|
||||
|
||||
@container content-page (max-width: 1200px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.contentTableLeft {
|
||||
padding-left: var(--spacing-xl);
|
||||
padding-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.contentTableRight {
|
||||
padding-top: var(--spacing-xl);
|
||||
padding-left: var(--content-padding);
|
||||
padding-right: var(--content-padding);
|
||||
}
|
||||
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column:first-child {
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
@container content-page (max-width: 992px) {
|
||||
.contentTableLeft {
|
||||
padding-left: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.contentTableRight {
|
||||
padding-top: 4.5em;
|
||||
padding-left: var(--spacing-xl);
|
||||
padding-right: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@container content-page (max-width: 768px) {
|
||||
.contentPage {
|
||||
padding-top: 5.5em;
|
||||
}
|
||||
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxHeadline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.pageBannerMobile {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
img.pageBanner {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contentTableLeft {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.contentTableRight {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.contentTableLeft>div>#navBreadcrumb {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.accordion {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.accordion:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.accordion>ul>li>ul.categoryItems>li>a {
|
||||
width: 100%;
|
||||
padding: var(--spacing-sm) 0;
|
||||
}
|
||||
|
||||
.accordion .triangleLeft,
|
||||
.triangleOverlay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.linkContactUs {
|
||||
display: inline-block !important;
|
||||
text-decoration: underline !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column p.contactUs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@container content-page (max-width: 620px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@container content-page (max-width: 480px) {
|
||||
.contentPage {
|
||||
padding-top: 4em;
|
||||
padding-bottom: 0;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
.contentTableLeft {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
border-top: 0.4em solid transparent;
|
||||
border-bottom: 0.4em solid transparent;
|
||||
border-left: 0.4em solid #ee3224;
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
|
||||
.categoryItems {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.accordion {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.accordion div.mobileContent .seekJobWrapper {
|
||||
margin-top: var(--spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.accordion div.mobileContent a.seekJob {
|
||||
display: block;
|
||||
padding: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@container content-page (max-width: 380px) {
|
||||
.contentPage>.contentTable .productCustomers .customerIcons img {
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
.contentPage>.contentTable .productCustomers .customerIcons img.shorter {
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* 容器查询回退方案 - 为不支持容器查询的浏览器提供媒体查询 */
|
||||
@supports not (container-type: inline-size) {
|
||||
@media only screen and (max-width: 1600px) {
|
||||
.contentTableRight {
|
||||
padding-top: 3.5em;
|
||||
padding-left: 4.0em;
|
||||
padding-right: 8.0em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1500px) {
|
||||
.contentTableRight {
|
||||
padding-top: 3.5em;
|
||||
padding-left: 4.0em;
|
||||
padding-right: 6.0em;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 75%;
|
||||
}
|
||||
.contentTableLeft {
|
||||
padding-left: 3em;
|
||||
padding-top: 3em;
|
||||
}
|
||||
.contentTableRight {
|
||||
padding-top: 3em;
|
||||
padding-left: 4.0em;
|
||||
padding-right: 4.0em;
|
||||
}
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column {
|
||||
width: 100%;
|
||||
}
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column:first-child {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.contentTableLeft {
|
||||
padding-left: 2em;
|
||||
}
|
||||
.contentTableRight {
|
||||
padding-top: 4.5em;
|
||||
padding-left: 3em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.contentPage {
|
||||
padding-top: 5.5em;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxHeadline {
|
||||
display: none;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 90%;
|
||||
}
|
||||
.pageBannerMobile {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
img.pageBanner {
|
||||
display: none;
|
||||
}
|
||||
.contentTableLeft {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.contentTableRight {
|
||||
display: none;
|
||||
}
|
||||
.contentTableLeft>div>#navBreadcrumb {
|
||||
display: none;
|
||||
}
|
||||
.accordion {
|
||||
padding: 2em;
|
||||
}
|
||||
.accordion:after {
|
||||
display: none;
|
||||
}
|
||||
.accordion>ul>li>ul.categoryItems>li>a {
|
||||
width: 100%;
|
||||
padding: 1em 0;
|
||||
}
|
||||
.accordion .triangleLeft,
|
||||
.triangleOverlay {
|
||||
display: none;
|
||||
}
|
||||
.linkContactUs {
|
||||
display: inline-block !important;
|
||||
text-decoration: underline !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column p.contactUs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 620px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.contentPage {
|
||||
padding-top: 4em;
|
||||
padding-bottom: 0;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
.contentTableLeft {
|
||||
width: 100%;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
display: none;
|
||||
}
|
||||
.triangle {
|
||||
border-top: 0.4em solid transparent;
|
||||
border-bottom: 0.4em solid transparent;
|
||||
border-left: 0.4em solid #ee3224;
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
.categoryItems {
|
||||
padding: 0;
|
||||
}
|
||||
.accordion {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.accordion div.mobileContent .seekJobWrapper {
|
||||
margin-top: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
.accordion div.mobileContent a.seekJob {
|
||||
display: block;
|
||||
padding: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 380px) {
|
||||
.contentPage>.contentTable .productCustomers .customerIcons img {
|
||||
height: 2.5em;
|
||||
}
|
||||
.contentPage>.contentTable .productCustomers .customerIcons img.shorter {
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* NAV SIDEBAR */
|
||||
@@ -479,179 +869,396 @@
|
||||
|
||||
/* MEDIA QUERIES */
|
||||
|
||||
@media only screen and (max-width: 1600px) {
|
||||
.contentTableRight {
|
||||
padding-top: 3.5em;
|
||||
padding-left: 4.0em;
|
||||
padding-right: 8.0em;
|
||||
}
|
||||
|
||||
/* 现代 CSS 优化和增强功能 */
|
||||
|
||||
/* 使用 CSS Grid 实现更灵活的布局 */
|
||||
.contentPage {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-width) var(--content-width);
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1500px) {
|
||||
.contentTableRight {
|
||||
padding-top: 3.5em;
|
||||
padding-left: 4.0em;
|
||||
padding-right: 6.0em;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: 3em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* SMALL LAPTOPS */
|
||||
|
||||
@media only screen and (max-width: 1200px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: 2.5em;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 75%;
|
||||
}
|
||||
.contentTableLeft {
|
||||
padding-left: 3em;
|
||||
padding-top: 3em;
|
||||
}
|
||||
.contentTableRight {
|
||||
padding-top: 3em;
|
||||
padding-left: 4.0em;
|
||||
padding-right: 4.0em;
|
||||
}
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column {
|
||||
width: 100%;
|
||||
}
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column:first-child {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* SMALL LAPTOPS */
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
.contentTableLeft {
|
||||
padding-left: 2em;
|
||||
}
|
||||
.contentTableRight {
|
||||
padding-top: 4.5em;
|
||||
padding-left: 3em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* LARGE TABLETS */
|
||||
|
||||
@media only screen and (max-width: 768px) {
|
||||
@container content-page (max-width: 768px) {
|
||||
.contentPage {
|
||||
padding-top: 5.5em;
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxHeadline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的国际化支持 */
|
||||
.contentTableLeft {
|
||||
padding-inline-start: var(--sidebar-padding);
|
||||
padding-block-start: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.contentTableRight {
|
||||
padding-inline: var(--content-padding);
|
||||
padding-block-start: 3.5em;
|
||||
}
|
||||
|
||||
/* 使用 CSS 自定义属性实现主题切换 */
|
||||
:root {
|
||||
/* 颜色主题 */
|
||||
--primary-color: #ee3224;
|
||||
--secondary-color: #737373;
|
||||
--border-color: #DCDCDC;
|
||||
--text-color: #000;
|
||||
--link-hover-color: #737373;
|
||||
|
||||
/* 动画变量 */
|
||||
--transition-fast: 0.2s ease;
|
||||
--transition-normal: 0.3s ease;
|
||||
--transition-slow: 0.5s ease;
|
||||
}
|
||||
|
||||
/* 深色主题支持 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--primary-color: #ff6b6b;
|
||||
--secondary-color: #a0a0a0;
|
||||
--border-color: #404040;
|
||||
--text-color: #ffffff;
|
||||
--link-hover-color: #ff6b6b;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 自定义属性 */
|
||||
.breadcrumb>a:hover {
|
||||
color: var(--link-hover-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.accordion:after {
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的 RTL 支持 */
|
||||
.accordion:after {
|
||||
inset-inline-end: 0;
|
||||
inset-block-start: 0;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的间距 */
|
||||
.accordion>.content {
|
||||
margin-block-start: var(--spacing-lg);
|
||||
padding-inline-start: 0.2em;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的边框 */
|
||||
.accordion>ul>li.category {
|
||||
margin-block-end: 1.2em;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的定位 */
|
||||
.accordion>ul>li.category>a.categoryHead {
|
||||
margin-block-end: 1.2em;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的布局 */
|
||||
.accordion>ul>li.category>a.categoryHead {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的响应式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.accordion {
|
||||
padding-inline: var(--spacing-lg);
|
||||
padding-block: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端优化 */
|
||||
@container content-page (max-width: 480px) {
|
||||
.accordion {
|
||||
padding-block-end: 0;
|
||||
}
|
||||
|
||||
.accordion div.mobileContent .seekJobWrapper {
|
||||
margin-block-start: var(--spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的图片优化 */
|
||||
@container content-page (max-width: 380px) {
|
||||
.contentPage>.contentTable .productCustomers .customerIcons img {
|
||||
height: 2.5em;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.contentPage>.contentTable .productCustomers .customerIcons img.shorter {
|
||||
height: 1.5em;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的三角形样式 */
|
||||
.triangle {
|
||||
border-block: 0.4em solid transparent;
|
||||
border-inline-start: 0.4em solid var(--primary-color);
|
||||
margin-inline-end: 0.6em;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的链接样式 */
|
||||
.linkContactUs {
|
||||
display: inline-block !important;
|
||||
text-decoration: underline !important;
|
||||
padding-block-end: 0;
|
||||
color: var(--primary-color);
|
||||
transition: color var(--transition-normal);
|
||||
}
|
||||
|
||||
.linkContactUs:hover {
|
||||
color: var(--link-hover-color);
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的面包屑样式 */
|
||||
.breadcrumb {
|
||||
margin-block-end: var(--spacing-lg);
|
||||
margin-inline-end: var(--spacing-sm);
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的分类项样式 */
|
||||
.categoryItems {
|
||||
padding-inline: 0;
|
||||
margin-block: 0;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端内容样式 */
|
||||
.accordion div.mobileContent a.seekJob {
|
||||
display: block;
|
||||
padding: 1.2em;
|
||||
text-align: center;
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: var(--border-radius);
|
||||
transition: background-color var(--transition-normal);
|
||||
}
|
||||
|
||||
.accordion div.mobileContent a.seekJob:hover {
|
||||
background: var(--link-hover-color);
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的页面横幅样式 */
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: 1.2;
|
||||
margin-block: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 75%;
|
||||
margin-block: var(--spacing-md);
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端横幅样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 90%;
|
||||
}
|
||||
.pageBannerMobile {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
img.pageBanner {
|
||||
display: none;
|
||||
}
|
||||
.contentTableLeft {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.contentTableRight {
|
||||
display: none;
|
||||
}
|
||||
.contentTableLeft>div>#navBreadcrumb {
|
||||
display: none;
|
||||
}
|
||||
.accordion {
|
||||
padding: 2em;
|
||||
}
|
||||
.accordion:after {
|
||||
display: none;
|
||||
}
|
||||
.accordion>ul>li>ul.categoryItems>li>a {
|
||||
width: 100%;
|
||||
padding: 1em 0;
|
||||
}
|
||||
.accordion .triangleLeft,
|
||||
.triangleOverlay {
|
||||
display: none;
|
||||
}
|
||||
.linkContactUs {
|
||||
display: inline-block !important;
|
||||
text-decoration: underline !important;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column p.contactUs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 620px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
@container content-page (max-width: 620px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* PHONES */
|
||||
|
||||
@media only screen and (max-width: 480px) {
|
||||
.contentPage {
|
||||
padding-top: 4em;
|
||||
padding-bottom: 0;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
.contentTableLeft {
|
||||
width: 100%;
|
||||
}
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
@container content-page (max-width: 480px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bread {
|
||||
display: none;
|
||||
}
|
||||
.triangle {
|
||||
border-top: 0.4em solid transparent;
|
||||
border-bottom: 0.4em solid transparent;
|
||||
border-left: 0.4em solid #ee3224;
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的页面内容样式 */
|
||||
.contentPage {
|
||||
padding-block-start: var(--spacing-xxxxl);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
@container content-page (max-width: 768px) {
|
||||
.contentPage {
|
||||
padding-block-start: 5.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@container content-page (max-width: 480px) {
|
||||
.contentPage {
|
||||
padding-block-start: 4em;
|
||||
padding-block-end: 0;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的表格样式 */
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column {
|
||||
width: 100%;
|
||||
margin-block-end: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column:first-child {
|
||||
margin-block-end: var(--spacing-sm);
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端表格样式 */
|
||||
@container content-page (max-width: 1200px) {
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column:first-child {
|
||||
margin-block-end: var(--spacing-sm);
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端内容样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.contentPage>.contentTable .bottomTwoColumn div.column p.contactUs {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端导航样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.contentTableLeft>div>#navBreadcrumb {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端图标样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.accordion .triangleLeft,
|
||||
.triangleOverlay {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端链接样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.accordion>ul>li>ul.categoryItems>li>a {
|
||||
width: 100%;
|
||||
padding-block: var(--spacing-sm);
|
||||
padding-inline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端页面横幅样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxHeadline {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pageBannerMobile {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
img.pageBanner {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端布局样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.contentTableLeft {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.contentTableRight {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端手风琴样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.accordion {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.accordion:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端链接样式 */
|
||||
@container content-page (max-width: 768px) {
|
||||
.linkContactUs {
|
||||
display: inline-block !important;
|
||||
text-decoration: underline !important;
|
||||
padding-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端字体样式 */
|
||||
@container content-page (max-width: 620px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
}
|
||||
|
||||
@container content-page (max-width: 480px) {
|
||||
.contentPage .contentPageBanner .bannerBox .bannerBoxTitle {
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端三角形样式 */
|
||||
@container content-page (max-width: 480px) {
|
||||
.triangle {
|
||||
border-block: 0.4em solid transparent;
|
||||
border-inline-start: 0.4em solid var(--primary-color);
|
||||
margin-inline-end: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端分类项样式 */
|
||||
@container content-page (max-width: 480px) {
|
||||
.categoryItems {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端手风琴样式 */
|
||||
@container content-page (max-width: 480px) {
|
||||
.accordion {
|
||||
padding-bottom: 0;
|
||||
padding-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端求职包装器样式 */
|
||||
@container content-page (max-width: 480px) {
|
||||
.accordion div.mobileContent .seekJobWrapper {
|
||||
margin-top: 2em;
|
||||
margin-block-start: var(--spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端求职链接样式 */
|
||||
@container content-page (max-width: 480px) {
|
||||
.accordion div.mobileContent a.seekJob {
|
||||
display: block;
|
||||
padding: 1.2em;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 380px) {
|
||||
/* 使用 CSS 逻辑属性实现更好的移动端客户图标样式 */
|
||||
@container content-page (max-width: 380px) {
|
||||
.contentPage>.contentTable .productCustomers .customerIcons img {
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
.contentPage>.contentTable .productCustomers .customerIcons img.shorter {
|
||||
height: 1.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* END NEW BY MARK */
|
||||
29
src/assets/icon.svg
Normal file
29
src/assets/icon.svg
Normal file
@@ -0,0 +1,29 @@
|
||||
<svg class="css-ze2te4 css-qd6ojx" viewBox="0 0 100 100">
|
||||
<g
|
||||
transform="translate(-1.3683870295384977, -1.3683870295384977) scale(0.3424559467337198)"
|
||||
class="css-owa8dd" fill="#fafafa">
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="b" x="8.5" y="8.5"
|
||||
transform="matrix(0.719 -0.6951 0.6951 0.719 -62.0973 146.4242)"
|
||||
width="283" height="283"></rect>
|
||||
</defs>
|
||||
<clipPath id="a">
|
||||
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b" style=""
|
||||
overflow="visible"></use>
|
||||
</clipPath>
|
||||
<g style="clip-path:url(#a);">
|
||||
<path
|
||||
d="M67.2,155.9l-59.3-1c-2.3,0-4,1.9-3.9,4c1.4,22.6,7.8,43.7,18.3,62.4c1,1.7,3,2.5,4.8,1.7l57.5-24.6 c3.7-1.6,8.1-1.3,11.5,1.1c4.4,3.2,5.8,9.2,3.6,13.9l-26.7,57c-0.8,1.7-0.2,3.9,1.5,4.9c18.3,11,39.2,18.2,61.7,20.4 c2.2,0.2,4.1-1.5,4.2-3.8l1-59.3C142,190.9,108.9,156.6,67.2,155.9z"></path>
|
||||
<path
|
||||
d="M144.1,67.2l1-59.3c0-2.3-1.9-4-4-3.9c-22.6,1.4-43.7,7.8-62.4,18.3c-1.7,1-2.5,3-1.7,4.8l24.6,57.5 c1.6,3.7,1.3,8.1-1.1,11.5c-3.2,4.4-9.1,5.8-13.9,3.6L29.7,72.9c-1.7-0.8-3.9-0.2-4.9,1.5c-11,18.3-18.2,39.2-20.4,61.7 c-0.2,2.2,1.5,4.1,3.8,4.2l59.3,1C109.1,142,143.4,108.9,144.1,67.2z"></path>
|
||||
<path
|
||||
d="M232.8,144.1l59.3,1c2.3,0,4-1.9,3.9-4c-1.4-22.6-7.8-43.7-18.3-62.4c-1-1.7-3-2.5-4.8-1.7l-57.5,24.6 c-3.7,1.6-8.1,1.3-11.5-1.1c-4.4-3.2-5.8-9.1-3.6-13.9L227,29.8c0.8-1.7,0.2-3.9-1.5-4.9c-18.2-11.1-39.2-18.3-61.7-20.4 c-2.2-0.2-4.1,1.5-4.2,3.8l-1,59.3C158,109.1,191.1,143.4,232.8,144.1z"></path>
|
||||
<path
|
||||
d="M198.2,215.1c-2.1-4.9-0.6-10.7,4.1-13.8c3.4-2.4,7.8-2.5,11.5-0.7l56.6,26.5c1.7,0.8,3.9,0.2,4.9-1.5 c11-18.3,18.2-39.2,20.3-61.7c0.2-2.2-1.5-4.1-3.8-4.2l-59.3-1c-41.7-0.7-76,32.4-76.7,74.1l-1,59.3c0,2.3,1.9,4,4,3.9 c22.6-1.4,43.7-7.8,62.4-18.3c1.7-1,2.5-3,1.7-4.8L198.2,215.1z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
29
src/assets/img/icon.svg
Normal file
29
src/assets/img/icon.svg
Normal file
@@ -0,0 +1,29 @@
|
||||
<svg class="css-ze2te4 css-qd6ojx" viewBox="0 0 100 100">
|
||||
<g
|
||||
transform="translate(-1.3683870295384977, -1.3683870295384977) scale(0.3424559467337198)"
|
||||
class="css-owa8dd" fill="#fafafa">
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="b" x="8.5" y="8.5"
|
||||
transform="matrix(0.719 -0.6951 0.6951 0.719 -62.0973 146.4242)"
|
||||
width="283" height="283"></rect>
|
||||
</defs>
|
||||
<clipPath id="a">
|
||||
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b" style=""
|
||||
overflow="visible"></use>
|
||||
</clipPath>
|
||||
<g style="clip-path:url(#a);">
|
||||
<path
|
||||
d="M67.2,155.9l-59.3-1c-2.3,0-4,1.9-3.9,4c1.4,22.6,7.8,43.7,18.3,62.4c1,1.7,3,2.5,4.8,1.7l57.5-24.6 c3.7-1.6,8.1-1.3,11.5,1.1c4.4,3.2,5.8,9.2,3.6,13.9l-26.7,57c-0.8,1.7-0.2,3.9,1.5,4.9c18.3,11,39.2,18.2,61.7,20.4 c2.2,0.2,4.1-1.5,4.2-3.8l1-59.3C142,190.9,108.9,156.6,67.2,155.9z"></path>
|
||||
<path
|
||||
d="M144.1,67.2l1-59.3c0-2.3-1.9-4-4-3.9c-22.6,1.4-43.7,7.8-62.4,18.3c-1.7,1-2.5,3-1.7,4.8l24.6,57.5 c1.6,3.7,1.3,8.1-1.1,11.5c-3.2,4.4-9.1,5.8-13.9,3.6L29.7,72.9c-1.7-0.8-3.9-0.2-4.9,1.5c-11,18.3-18.2,39.2-20.4,61.7 c-0.2,2.2,1.5,4.1,3.8,4.2l59.3,1C109.1,142,143.4,108.9,144.1,67.2z"></path>
|
||||
<path
|
||||
d="M232.8,144.1l59.3,1c2.3,0,4-1.9,3.9-4c-1.4-22.6-7.8-43.7-18.3-62.4c-1-1.7-3-2.5-4.8-1.7l-57.5,24.6 c-3.7,1.6-8.1,1.3-11.5-1.1c-4.4-3.2-5.8-9.1-3.6-13.9L227,29.8c0.8-1.7,0.2-3.9-1.5-4.9c-18.2-11.1-39.2-18.3-61.7-20.4 c-2.2-0.2-4.1,1.5-4.2,3.8l-1,59.3C158,109.1,191.1,143.4,232.8,144.1z"></path>
|
||||
<path
|
||||
d="M198.2,215.1c-2.1-4.9-0.6-10.7,4.1-13.8c3.4-2.4,7.8-2.5,11.5-0.7l56.6,26.5c1.7,0.8,3.9,0.2,4.9-1.5 c11-18.3,18.2-39.2,20.3-61.7c0.2-2.2-1.5-4.1-3.8-4.2l-59.3-1c-41.7-0.7-76,32.4-76.7,74.1l-1,59.3c0,2.3,1.9,4,4,3.9 c22.6-1.4,43.7-7.8,62.4-18.3c1.7-1,2.5-3,1.7-4.8L198.2,215.1z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 5.9 KiB |
45
src/assets/img/logo.svg
Normal file
45
src/assets/img/logo.svg
Normal file
@@ -0,0 +1,45 @@
|
||||
<svg width="448.3" height="309.7"
|
||||
viewBox="0 0 249.99999999999997 172.70410043836824" class="looka-1j8o68f">
|
||||
<defs id="SvgjsDefs9244"></defs>
|
||||
<g id="SvgjsG9245" featurekey="JQyOZB-0"
|
||||
transform="matrix(0.3,0,0,0.3,73.6,-1.4)"
|
||||
fill="#fafafa">
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="b" x="8.5" y="8.5"
|
||||
transform="matrix(0.7,-0.7,0.7,0.7,-62.1,146.4)" width="283"
|
||||
height="283"></rect>
|
||||
</defs>
|
||||
<clipPath id="a">
|
||||
<use transform="matrix(1,0,0,1,0,0)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b" style=""
|
||||
overflow="visible"></use>
|
||||
</clipPath>
|
||||
<g style="clip-path: url(#a)"
|
||||
fill="#0097f3"
|
||||
>
|
||||
<path
|
||||
d="M 67.2 155.9 l -59.3 -1 c -2.3 0 -4 1.9 -3.9 4 c 1.4 22.6 7.8 43.7 18.3 62.4 c 1 1.7 3 2.5 4.8 1.7 l 57.5 -24.6 c 3.7 -1.6 8.1 -1.3 11.5 1.1 c 4.4 3.2 5.8 9.2 3.6 13.9 l -26.7 57 c -0.8 1.7 -0.2 3.9 1.5 4.9 c 18.3 11 39.2 18.2 61.7 20.4 c 2.2 0.2 4.1 -1.5 4.2 -3.8 l 1 -59.3 C 142 190.9 108.9 156.6 67.2 155.9 z"></path>
|
||||
<path
|
||||
d="M 144.1 67.2 l 1 -59.3 c 0 -2.3 -1.9 -4 -4 -3.9 c -22.6 1.4 -43.7 7.8 -62.4 18.3 c -1.7 1 -2.5 3 -1.7 4.8 l 24.6 57.5 c 1.6 3.7 1.3 8.1 -1.1 11.5 c -3.2 4.4 -9.1 5.8 -13.9 3.6 L 29.7 72.9 c -1.7 -0.8 -3.9 -0.2 -4.9 1.5 c -11 18.3 -18.2 39.2 -20.4 61.7 c -0.2 2.2 1.5 4.1 3.8 4.2 l 59.3 1 C 109.1 142 143.4 108.9 144.1 67.2 z"></path>
|
||||
<path
|
||||
d="M 232.8 144.1 l 59.3 1 c 2.3 0 4 -1.9 3.9 -4 c -1.4 -22.6 -7.8 -43.7 -18.3 -62.4 c -1 -1.7 -3 -2.5 -4.8 -1.7 l -57.5 24.6 c -3.7 1.6 -8.1 1.3 -11.5 -1.1 c -4.4 -3.2 -5.8 -9.1 -3.6 -13.9 L 227 29.8 c 0.8 -1.7 0.2 -3.9 -1.5 -4.9 c -18.2 -11.1 -39.2 -18.3 -61.7 -20.4 c -2.2 -0.2 -4.1 1.5 -4.2 3.8 l -1 59.3 C 158 109.1 191.1 143.4 232.8 144.1 z"></path>
|
||||
<path
|
||||
d="M 198.2 215.1 c -2.1 -4.9 -0.6 -10.7 4.1 -13.8 c 3.4 -2.4 7.8 -2.5 11.5 -0.7 l 56.6 26.5 c 1.7 0.8 3.9 0.2 4.9 -1.5 c 11 -18.3 18.2 -39.2 20.3 -61.7 c 0.2 -2.2 -1.5 -4.1 -3.8 -4.2 l -59.3 -1 c -41.7 -0.7 -76 32.4 -76.7 74.1 l -1 59.3 c 0 2.3 1.9 4 4 3.9 c 22.6 -1.4 43.7 -7.8 62.4 -18.3 c 1.7 -1 2.5 -3 1.7 -4.8 L 198.2 215.1 z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="SvgjsG9243" featurekey="SbCDzn-3"
|
||||
transform="matrix(-4.3,0,0,-4.3,44.1,206.1)"
|
||||
fill="#0097f3">
|
||||
<path
|
||||
d="M 1.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
|
||||
</g>
|
||||
<g id="SvgjsG9246" featurekey="SbCDzn-0"
|
||||
transform="matrix(4.3,0,0,4.3,-4.9,86.6)"
|
||||
fill="#0097f3">
|
||||
<path
|
||||
d="M 11.9 7.8 l 3 0 l 0 12.2 l -3 0 l 0 -12.2 z M 20.2 13.3 l 0 6.7 l -3 0 l 0 -12.2 l 3 0 l 3.8 6.8 l 3.8 -6.8 l 3 0 l 0 12.2 l -3 0 l 0 -6.7 l -2.3 4 l -3 0 z M 45.9 7.8 l 2.9 0 l -2.3 12.2 l -4.4 0 l -1.6 -7.1 l -1.7 7.1 l -4.7 0 l -2 -12.2 l 3.1 0 l 1.4 9.2 l 1.8 -7.1 l 4.3 0 l 1.7 7.1 z M 50.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
44
src/assets/img/logo_b.svg
Normal file
44
src/assets/img/logo_b.svg
Normal file
@@ -0,0 +1,44 @@
|
||||
<svg width="448.3" height="309.7"
|
||||
viewBox="0 0 249.99999999999997 172.70410043836824" class="looka-1j8o68f">
|
||||
<defs id="SvgjsDefs9244"></defs>
|
||||
<g id="SvgjsG9245" featurekey="JQyOZB-0"
|
||||
transform="matrix(0.3,0,0,0.3,73.6,-1.4)"
|
||||
fill="#fafafa">
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="b" x="8.5" y="8.5"
|
||||
transform="matrix(0.7,-0.7,0.7,0.7,-62.1,146.4)" width="283"
|
||||
height="283"></rect>
|
||||
</defs>
|
||||
<clipPath id="a">
|
||||
<use transform="matrix(1,0,0,1,0,0)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b" style=""
|
||||
overflow="visible"></use>
|
||||
</clipPath>
|
||||
<g style="clip-path: url(#a)"
|
||||
>
|
||||
<path
|
||||
d="M 67.2 155.9 l -59.3 -1 c -2.3 0 -4 1.9 -3.9 4 c 1.4 22.6 7.8 43.7 18.3 62.4 c 1 1.7 3 2.5 4.8 1.7 l 57.5 -24.6 c 3.7 -1.6 8.1 -1.3 11.5 1.1 c 4.4 3.2 5.8 9.2 3.6 13.9 l -26.7 57 c -0.8 1.7 -0.2 3.9 1.5 4.9 c 18.3 11 39.2 18.2 61.7 20.4 c 2.2 0.2 4.1 -1.5 4.2 -3.8 l 1 -59.3 C 142 190.9 108.9 156.6 67.2 155.9 z"></path>
|
||||
<path
|
||||
d="M 144.1 67.2 l 1 -59.3 c 0 -2.3 -1.9 -4 -4 -3.9 c -22.6 1.4 -43.7 7.8 -62.4 18.3 c -1.7 1 -2.5 3 -1.7 4.8 l 24.6 57.5 c 1.6 3.7 1.3 8.1 -1.1 11.5 c -3.2 4.4 -9.1 5.8 -13.9 3.6 L 29.7 72.9 c -1.7 -0.8 -3.9 -0.2 -4.9 1.5 c -11 18.3 -18.2 39.2 -20.4 61.7 c -0.2 2.2 1.5 4.1 3.8 4.2 l 59.3 1 C 109.1 142 143.4 108.9 144.1 67.2 z"></path>
|
||||
<path
|
||||
d="M 232.8 144.1 l 59.3 1 c 2.3 0 4 -1.9 3.9 -4 c -1.4 -22.6 -7.8 -43.7 -18.3 -62.4 c -1 -1.7 -3 -2.5 -4.8 -1.7 l -57.5 24.6 c -3.7 1.6 -8.1 1.3 -11.5 -1.1 c -4.4 -3.2 -5.8 -9.1 -3.6 -13.9 L 227 29.8 c 0.8 -1.7 0.2 -3.9 -1.5 -4.9 c -18.2 -11.1 -39.2 -18.3 -61.7 -20.4 c -2.2 -0.2 -4.1 1.5 -4.2 3.8 l -1 59.3 C 158 109.1 191.1 143.4 232.8 144.1 z"></path>
|
||||
<path
|
||||
d="M 198.2 215.1 c -2.1 -4.9 -0.6 -10.7 4.1 -13.8 c 3.4 -2.4 7.8 -2.5 11.5 -0.7 l 56.6 26.5 c 1.7 0.8 3.9 0.2 4.9 -1.5 c 11 -18.3 18.2 -39.2 20.3 -61.7 c 0.2 -2.2 -1.5 -4.1 -3.8 -4.2 l -59.3 -1 c -41.7 -0.7 -76 32.4 -76.7 74.1 l -1 59.3 c 0 2.3 1.9 4 4 3.9 c 22.6 -1.4 43.7 -7.8 62.4 -18.3 c 1.7 -1 2.5 -3 1.7 -4.8 L 198.2 215.1 z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="SvgjsG9243" featurekey="SbCDzn-3"
|
||||
transform="matrix(-4.3,0,0,-4.3,44.1,206.1)"
|
||||
fill="#fafafa">
|
||||
<path
|
||||
d="M 1.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
|
||||
</g>
|
||||
<g id="SvgjsG9246" featurekey="SbCDzn-0"
|
||||
transform="matrix(4.3,0,0,4.3,-4.9,86.6)"
|
||||
fill="#fafafa">
|
||||
<path
|
||||
d="M 11.9 7.8 l 3 0 l 0 12.2 l -3 0 l 0 -12.2 z M 20.2 13.3 l 0 6.7 l -3 0 l 0 -12.2 l 3 0 l 3.8 6.8 l 3.8 -6.8 l 3 0 l 0 12.2 l -3 0 l 0 -6.7 l -2.3 4 l -3 0 z M 45.9 7.8 l 2.9 0 l -2.3 12.2 l -4.4 0 l -1.6 -7.1 l -1.7 7.1 l -4.7 0 l -2 -12.2 l 3.1 0 l 1.4 9.2 l 1.8 -7.1 l 4.3 0 l 1.7 7.1 z M 50.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 528 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
45
src/assets/logo.svg
Normal file
45
src/assets/logo.svg
Normal file
@@ -0,0 +1,45 @@
|
||||
<svg width="448.3" height="309.7"
|
||||
viewBox="0 0 249.99999999999997 172.70410043836824" class="looka-1j8o68f">
|
||||
<defs id="SvgjsDefs9244"></defs>
|
||||
<g id="SvgjsG9245" featurekey="JQyOZB-0"
|
||||
transform="matrix(0.3,0,0,0.3,73.6,-1.4)"
|
||||
fill="#fafafa">
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="b" x="8.5" y="8.5"
|
||||
transform="matrix(0.7,-0.7,0.7,0.7,-62.1,146.4)" width="283"
|
||||
height="283"></rect>
|
||||
</defs>
|
||||
<clipPath id="a">
|
||||
<use transform="matrix(1,0,0,1,0,0)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#b" style=""
|
||||
overflow="visible"></use>
|
||||
</clipPath>
|
||||
<g style="clip-path: url(#a)"
|
||||
fill="#0097f3"
|
||||
>
|
||||
<path
|
||||
d="M 67.2 155.9 l -59.3 -1 c -2.3 0 -4 1.9 -3.9 4 c 1.4 22.6 7.8 43.7 18.3 62.4 c 1 1.7 3 2.5 4.8 1.7 l 57.5 -24.6 c 3.7 -1.6 8.1 -1.3 11.5 1.1 c 4.4 3.2 5.8 9.2 3.6 13.9 l -26.7 57 c -0.8 1.7 -0.2 3.9 1.5 4.9 c 18.3 11 39.2 18.2 61.7 20.4 c 2.2 0.2 4.1 -1.5 4.2 -3.8 l 1 -59.3 C 142 190.9 108.9 156.6 67.2 155.9 z"></path>
|
||||
<path
|
||||
d="M 144.1 67.2 l 1 -59.3 c 0 -2.3 -1.9 -4 -4 -3.9 c -22.6 1.4 -43.7 7.8 -62.4 18.3 c -1.7 1 -2.5 3 -1.7 4.8 l 24.6 57.5 c 1.6 3.7 1.3 8.1 -1.1 11.5 c -3.2 4.4 -9.1 5.8 -13.9 3.6 L 29.7 72.9 c -1.7 -0.8 -3.9 -0.2 -4.9 1.5 c -11 18.3 -18.2 39.2 -20.4 61.7 c -0.2 2.2 1.5 4.1 3.8 4.2 l 59.3 1 C 109.1 142 143.4 108.9 144.1 67.2 z"></path>
|
||||
<path
|
||||
d="M 232.8 144.1 l 59.3 1 c 2.3 0 4 -1.9 3.9 -4 c -1.4 -22.6 -7.8 -43.7 -18.3 -62.4 c -1 -1.7 -3 -2.5 -4.8 -1.7 l -57.5 24.6 c -3.7 1.6 -8.1 1.3 -11.5 -1.1 c -4.4 -3.2 -5.8 -9.1 -3.6 -13.9 L 227 29.8 c 0.8 -1.7 0.2 -3.9 -1.5 -4.9 c -18.2 -11.1 -39.2 -18.3 -61.7 -20.4 c -2.2 -0.2 -4.1 1.5 -4.2 3.8 l -1 59.3 C 158 109.1 191.1 143.4 232.8 144.1 z"></path>
|
||||
<path
|
||||
d="M 198.2 215.1 c -2.1 -4.9 -0.6 -10.7 4.1 -13.8 c 3.4 -2.4 7.8 -2.5 11.5 -0.7 l 56.6 26.5 c 1.7 0.8 3.9 0.2 4.9 -1.5 c 11 -18.3 18.2 -39.2 20.3 -61.7 c 0.2 -2.2 -1.5 -4.1 -3.8 -4.2 l -59.3 -1 c -41.7 -0.7 -76 32.4 -76.7 74.1 l -1 59.3 c 0 2.3 1.9 4 4 3.9 c 22.6 -1.4 43.7 -7.8 62.4 -18.3 c 1.7 -1 2.5 -3 1.7 -4.8 L 198.2 215.1 z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="SvgjsG9243" featurekey="SbCDzn-3"
|
||||
transform="matrix(-4.3,0,0,-4.3,44.1,206.1)"
|
||||
fill="#0097f3">
|
||||
<path
|
||||
d="M 1.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
|
||||
</g>
|
||||
<g id="SvgjsG9246" featurekey="SbCDzn-0"
|
||||
transform="matrix(4.3,0,0,4.3,-4.9,86.6)"
|
||||
fill="#0097f3">
|
||||
<path
|
||||
d="M 11.9 7.8 l 3 0 l 0 12.2 l -3 0 l 0 -12.2 z M 20.2 13.3 l 0 6.7 l -3 0 l 0 -12.2 l 3 0 l 3.8 6.8 l 3.8 -6.8 l 3 0 l 0 12.2 l -3 0 l 0 -6.7 l -2.3 4 l -3 0 z M 45.9 7.8 l 2.9 0 l -2.3 12.2 l -4.4 0 l -1.6 -7.1 l -1.7 7.1 l -4.7 0 l -2 -12.2 l 3.1 0 l 1.4 9.2 l 1.8 -7.1 l 4.3 0 l 1.7 7.1 z M 50.1 7.8 l 9.1 0 l 0 2.8 l -6.1 0 l 0 2 l 4.9 0 l 0 2.8 l -4.9 0 l 0 1.9 l 6.1 0 l 0 2.8 l -9.1 0 l 0 -12.2 z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
Reference in New Issue
Block a user