update
This commit is contained in:
toom1996
259
src/assets/template_3/js/app.js
Normal file
259
src/assets/template_3/js/app.js
Normal file
@ -0,0 +1,259 @@
|
||||
/* Template Name: Evea - Responsive App Landing Tailwind CSS Template
|
||||
Author: Zoyothemes
|
||||
Email: zoyothemes@gmail.com
|
||||
Website: https://zoyothemes.com
|
||||
Version: 1.0.0
|
||||
Created: March 2024
|
||||
File Description: Main JS file of the template
|
||||
*/
|
||||
|
||||
/*********************************/
|
||||
/* INDEX */
|
||||
/*================================
|
||||
* 01. Sticky Navbar *
|
||||
* 02. Navbar active *
|
||||
* 03. Back to top *
|
||||
* 04. Accordions *
|
||||
* 05. Lucide Icons *
|
||||
================================*/
|
||||
|
||||
/*********************/
|
||||
/* Sticky Navbar */
|
||||
/*********************/
|
||||
function windowScroll() {
|
||||
const navbar = document.getElementById("navbar");
|
||||
|
||||
if (navbar) {
|
||||
if (
|
||||
document.body.scrollTop >= 50 ||
|
||||
document.documentElement.scrollTop >= 50
|
||||
) {
|
||||
navbar.classList.add("is-sticky");
|
||||
} else {
|
||||
navbar.classList.remove("is-sticky");
|
||||
}
|
||||
}
|
||||
}
|
||||
window.addEventListener("scroll", (ev) => {
|
||||
ev.preventDefault();
|
||||
windowScroll();
|
||||
});
|
||||
|
||||
|
||||
/*********************/
|
||||
/* Navbar Active */
|
||||
/*********************/
|
||||
try {
|
||||
var spy = new Gumshoe("#navbar-navlist a", {
|
||||
// Active classes
|
||||
// navClass: 'active', // applied to the nav list item
|
||||
// contentClass: 'active', // applied to the content
|
||||
offset: 80,
|
||||
});
|
||||
} catch (error) {}
|
||||
|
||||
// Smooth scroll
|
||||
try {
|
||||
var scroll = new SmoothScroll("#navbar-navlist a", {
|
||||
speed: 800,
|
||||
offset: 80,
|
||||
});
|
||||
} catch (error) {}
|
||||
|
||||
|
||||
/*********************/
|
||||
/* Menu Collapse */
|
||||
/*********************/
|
||||
const toggleCollapse = (elementId, show = true) => {
|
||||
const collapseEl = document.getElementById(elementId);
|
||||
if (show) {
|
||||
collapseEl.classList.remove("hidden");
|
||||
} else {
|
||||
collapseEl.classList.add("hidden");
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
// Toggle target elements using [data-collapse]
|
||||
document
|
||||
.querySelectorAll("[data-collapse]")
|
||||
.forEach(function (collapseToggleEl) {
|
||||
var collapseId = collapseToggleEl.getAttribute("data-collapse");
|
||||
|
||||
collapseToggleEl.addEventListener("click", function () {
|
||||
toggleCollapse(
|
||||
collapseId,
|
||||
document.getElementById(collapseId).classList.contains("hidden")
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
window.toggleCollapse = toggleCollapse;
|
||||
|
||||
/*********************/
|
||||
/* Back To Top */
|
||||
/*********************/
|
||||
var mybutton = document.getElementById("back-to-top");
|
||||
window.onscroll = function () {
|
||||
scrollFunction();
|
||||
};
|
||||
|
||||
function scrollFunction() {
|
||||
if(mybutton!=null){
|
||||
if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
|
||||
mybutton.style.display = "inline-flex";
|
||||
} else {
|
||||
mybutton.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function topFunction() {
|
||||
document.body.scrollTop = 0;
|
||||
document.documentElement.scrollTop = 0;
|
||||
}
|
||||
|
||||
/*********************/
|
||||
/* Accordions */
|
||||
/*********************/
|
||||
try {
|
||||
const Default = {
|
||||
alwaysOpen: false,
|
||||
activeClasses: 'bg-white text-black rounded-xl',
|
||||
inactiveClasses: 'text-dark',
|
||||
onOpen: () => { },
|
||||
onClose: () => { },
|
||||
onToggle: () => { }
|
||||
}
|
||||
|
||||
class Accordion {
|
||||
constructor(items = [], options = {}) {
|
||||
this._items = items
|
||||
this._options = { ...Default, ...options }
|
||||
this._init()
|
||||
}
|
||||
|
||||
_init() {
|
||||
if (this._items.length) {
|
||||
// show accordion item based on click
|
||||
this._items.map(item => {
|
||||
|
||||
if (item.active) {
|
||||
this.open(item.id)
|
||||
}
|
||||
|
||||
item.triggerEl.addEventListener('click', () => {
|
||||
this.toggle(item.id)
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
getItem(id) {
|
||||
return this._items.filter(item => item.id === id)[0]
|
||||
}
|
||||
|
||||
open(id) {
|
||||
const item = this.getItem(id)
|
||||
|
||||
// don't hide other accordions if always open
|
||||
if (!this._options.alwaysOpen) {
|
||||
this._items.map(i => {
|
||||
if (i !== item) {
|
||||
i.triggerEl.classList.remove(...this._options.activeClasses.split(" "))
|
||||
i.triggerEl.classList.add(...this._options.inactiveClasses.split(" "))
|
||||
i.targetEl.classList.add('hidden')
|
||||
i.triggerEl.setAttribute('aria-expanded', false)
|
||||
i.active = false
|
||||
|
||||
// rotate icon if set
|
||||
if (i.iconEl) {
|
||||
i.iconEl.classList.remove('rotate-180')
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// show active item
|
||||
item.triggerEl.classList.add(...this._options.activeClasses.split(" "))
|
||||
item.triggerEl.classList.remove(...this._options.inactiveClasses.split(" "))
|
||||
item.triggerEl.setAttribute('aria-expanded', true)
|
||||
item.targetEl.classList.remove('hidden')
|
||||
item.active = true
|
||||
|
||||
// rotate icon if set
|
||||
if (item.iconEl) {
|
||||
item.iconEl.classList.add('rotate-180')
|
||||
}
|
||||
|
||||
// callback function
|
||||
this._options.onOpen(this, item)
|
||||
}
|
||||
|
||||
toggle(id) {
|
||||
const item = this.getItem(id)
|
||||
|
||||
if (item.active) {
|
||||
this.close(id)
|
||||
} else {
|
||||
this.open(id)
|
||||
}
|
||||
|
||||
// callback function
|
||||
this._options.onToggle(this, item)
|
||||
}
|
||||
|
||||
close(id) {
|
||||
const item = this.getItem(id)
|
||||
|
||||
item.triggerEl.classList.remove(...this._options.activeClasses.split(" "))
|
||||
item.triggerEl.classList.add(...this._options.inactiveClasses.split(" "))
|
||||
item.targetEl.classList.add('hidden')
|
||||
item.triggerEl.setAttribute('aria-expanded', false)
|
||||
item.active = false
|
||||
|
||||
// rotate icon if set
|
||||
if (item.iconEl) {
|
||||
item.iconEl.classList.remove('rotate-180')
|
||||
}
|
||||
|
||||
// callback function
|
||||
this._options.onClose(this, item)
|
||||
}
|
||||
}
|
||||
|
||||
window.Accordion = Accordion;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('[data-accordion]').forEach(accordionEl => {
|
||||
const alwaysOpen = accordionEl.getAttribute('data-accordion')
|
||||
const activeClasses = accordionEl.getAttribute('data-active-classes')
|
||||
const inactiveClasses = accordionEl.getAttribute('data-inactive-classes')
|
||||
|
||||
const items = []
|
||||
accordionEl.querySelectorAll('[data-accordion-target]').forEach(el => {
|
||||
const item = {
|
||||
id: el.getAttribute('data-accordion-target'),
|
||||
triggerEl: el,
|
||||
targetEl: document.querySelector(el.getAttribute('data-accordion-target')),
|
||||
iconEl: el.querySelector('[data-accordion-icon]'),
|
||||
active: el.getAttribute('aria-expanded') === 'true' ? true : false
|
||||
}
|
||||
items.push(item)
|
||||
})
|
||||
|
||||
new Accordion(items, {
|
||||
alwaysOpen: alwaysOpen === 'open' ? true : false,
|
||||
activeClasses: activeClasses ? activeClasses : Default.activeClasses,
|
||||
inactiveClasses: inactiveClasses ? inactiveClasses : Default.inactiveClasses
|
||||
})
|
||||
})
|
||||
})
|
||||
} catch (error) { }
|
||||
|
||||
|
||||
/*********************/
|
||||
/* Lucide Icons */
|
||||
/*********************/
|
||||
lucide.createIcons();
|
||||
28
src/assets/template_3/js/swiper.js
Normal file
28
src/assets/template_3/js/swiper.js
Normal file
@ -0,0 +1,28 @@
|
||||
var swiper = new Swiper('.testi-swiper', {
|
||||
// slidesPerView: 5,
|
||||
centeredSlides: true,
|
||||
spaceBetween: 24,
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 3000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: ".testi-button-next",
|
||||
prevEl: ".testi-button-prev",
|
||||
},
|
||||
breakpoints: {
|
||||
0: {
|
||||
slidesPerView: 1,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
},
|
||||
991: {
|
||||
slidesPerView: 2.5,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
}
|
||||
});
|
||||
2
src/assets/template_3/libs/gumshoejs/gumshoe.polyfills.min.js
vendored
Normal file
2
src/assets/template_3/libs/gumshoejs/gumshoe.polyfills.min.js
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
/*! gumshoejs v5.1.2 | (c) 2019 Chris Ferdinandi | MIT License | http://github.com/cferdinandi/gumshoe */
|
||||
Element.prototype.closest||(Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest=function(t){var e=this;if(!document.documentElement.contains(this))return null;do{if(e.matches(t))return e;e=e.parentElement}while(null!==e);return null}),(function(){if("function"==typeof window.CustomEvent)return!1;function t(t,e){e=e||{bubbles:!1,cancelable:!1,detail:void 0};var n=document.createEvent("CustomEvent");return n.initCustomEvent(t,e.bubbles,e.cancelable,e.detail),n}t.prototype=window.Event.prototype,window.CustomEvent=t})(),(function(t,e){"function"==typeof define&&define.amd?define([],(function(){return e(t)})):"object"==typeof exports?module.exports=e(t):t.Gumshoe=e(t)})("undefined"!=typeof global?global:"undefined"!=typeof window?window:this,(function(t){"use strict";var e={navClass:"active",contentClass:"active",nested:!1,nestedClass:"active",offset:0,reflow:!1,events:!0},n=function(t,e,n){if(n.settings.events){var o=new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:n});e.dispatchEvent(o)}},o=function(t){var e=0;if(t.offsetParent)for(;t;)e+=t.offsetTop,t=t.offsetParent;return e>=0?e:0},s=function(t){t&&t.sort((function(t,e){return o(t.content)<o(e.content)?-1:1}))},r=function(e,n,o){var s=e.getBoundingClientRect(),r=(function(t){return"function"==typeof t.offset?parseFloat(t.offset()):parseFloat(t.offset)})(n);return o?parseInt(s.bottom,10)<(t.innerHeight||document.documentElement.clientHeight):parseInt(s.top,10)<=r},c=function(){return t.innerHeight+t.pageYOffset>=Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},i=function(t,e){var n=t[t.length-1];if(function(t,e){return!(!c()||!r(t.content,e,!0))}(n,e))return n;for(var o=t.length-1;o>=0;o--)if(r(t[o].content,e))return t[o]},l=function(t,e){if(e.nested&&t.parentNode){var n=t.parentNode.closest("li");n&&(n.classList.remove(e.nestedClass),l(n,e))}},a=function(t,e){if(t){var o=t.nav.closest("li");o&&(o.classList.remove(e.navClass),t.content.classList.remove(e.contentClass),l(o,e),n("gumshoeDeactivate",o,{link:t.nav,content:t.content,settings:e}))}},u=function(t,e){if(e.nested){var n=t.parentNode.closest("li");n&&(n.classList.add(e.nestedClass),u(n,e))}};return function(o,r){var c,l,f,d,m,v={};v.setup=function(){c=document.querySelectorAll(o),l=[],Array.prototype.forEach.call(c,(function(t){var e=document.getElementById(decodeURIComponent(t.hash.substr(1)));e&&l.push({nav:t,content:e})})),s(l)},v.detect=function(){var t=i(l,m);t?f&&t.content===f.content||(a(f,m),(function(t,e){if(t){var o=t.nav.closest("li");o&&(o.classList.add(e.navClass),t.content.classList.add(e.contentClass),u(o,e),n("gumshoeActivate",o,{link:t.nav,content:t.content,settings:e}))}})(t,m),f=t):f&&(a(f,m),f=null)};var p=function(e){d&&t.cancelAnimationFrame(d),d=t.requestAnimationFrame(v.detect)},h=function(e){d&&t.cancelAnimationFrame(d),d=t.requestAnimationFrame((function(){s(l),v.detect()}))};v.destroy=function(){f&&a(f,m),t.removeEventListener("scroll",p,!1),m.reflow&&t.removeEventListener("resize",h,!1),l=null,c=null,f=null,d=null,m=null};return m=(function(){var t={};return Array.prototype.forEach.call(arguments,(function(e){for(var n in e){if(!e.hasOwnProperty(n))return;t[n]=e[n]}})),t})(e,r||{}),v.setup(),v.detect(),t.addEventListener("scroll",p,!1),m.reflow&&t.addEventListener("resize",h,!1),v}}));
|
||||
1
src/assets/template_3/libs/jarallax/jarallax.min.css
vendored
Normal file
1
src/assets/template_3/libs/jarallax/jarallax.min.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
.jarallax{position:relative;z-index:0}.jarallax>.jarallax-img,picture.jarallax-img img{position:absolute;object-fit:cover;top:0;left:0;width:100%;height:100%;z-index:-1}
|
||||
6
src/assets/template_3/libs/jarallax/jarallax.min.js
vendored
Normal file
6
src/assets/template_3/libs/jarallax/jarallax.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
12
src/assets/template_3/libs/lucide/umd/lucide.min.js
vendored
Normal file
12
src/assets/template_3/libs/lucide/umd/lucide.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
161
src/assets/template_3/libs/preline/preline.js
Normal file
161
src/assets/template_3/libs/preline/preline.js
Normal file
File diff suppressed because one or more lines are too long
13
src/assets/template_3/libs/swiper/swiper-bundle.min.css
vendored
Normal file
13
src/assets/template_3/libs/swiper/swiper-bundle.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
13
src/assets/template_3/libs/swiper/swiper-bundle.min.js
vendored
Normal file
13
src/assets/template_3/libs/swiper/swiper-bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -7,6 +7,7 @@ import '../styles/template_2/nav.css'
|
||||
const { description = '', title = '', keywords = '', breadcrumb = [] } = Astro.props;
|
||||
import {getConfig} from '../../utils/config'
|
||||
const config = getConfig(Astro)
|
||||
console.log(config)
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
163
src/layouts/Layout_3.astro
Normal file
163
src/layouts/Layout_3.astro
Normal file
@ -0,0 +1,163 @@
|
||||
---
|
||||
const { description = '', title = '', keywords = '', breadcrumb = [] } = Astro.props;
|
||||
import {getConfig, getTp3Extra} from '../../utils/config'
|
||||
import { Image } from 'astro:assets';
|
||||
const config = getConfig(Astro)
|
||||
const extra = getTp3Extra(config.app_extra_tag)
|
||||
import BaijiahaoLogo from '../../public/common/baijiahao.svg'
|
||||
import Toutiaohao from '../../public/common/toutiaohao.svg'
|
||||
import Douyin from '../../public/common/douyin.svg'
|
||||
import Weibo from '../../public/common/weibo.svg'
|
||||
|
||||
import '../styles/template_3/icons.min.css'
|
||||
import '../styles/template_3/style.css'
|
||||
---
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="applicable-device"content="pc,mobile">
|
||||
<link rel="icon" type="image/svg+xml" href={config.app_logo} />
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
<meta name="keywords" content={keywords} />
|
||||
{config.app_baidu_zhanzhang ? <Fragment set:html={config.app_baidu_zhanzhang} /> : ''}
|
||||
</head>
|
||||
<body class="app-v4 page-name-books none-ecommerce">
|
||||
|
||||
<!-- Navbar Start -->
|
||||
<nav class="navbar fixed top-0 start-0 end-0 z-999 transition-all duration-500 py-5 items-center shadow-md lg:shadow-none [&.is-sticky]:bg-white group [&.is-sticky]:shadow-md bg-white lg:bg-transparent" id="navbar">
|
||||
<div class="container">
|
||||
|
||||
<div class="flex lg:flex-nowrap flex-wrap items-center">
|
||||
|
||||
<a class='flex items-center' href='/'>
|
||||
<Image src={config.app_logo} alt="logo" width={100} height={100} class="h-9 flex w-full" />
|
||||
<!-- {config.app_name} -->
|
||||
</a>
|
||||
|
||||
<div class="lg:hidden flex items-center ms-auto px-2.5">
|
||||
<button class="hs-collapse-toggle" type="button" id="hs-unstyled-collapse" data-hs-collapse="#navbarCollapse">
|
||||
<!-- <i data-lucide="menu" class="h-8 w-8 text-black"></i> -->
|
||||
<Image src="/template_3/menu-button.svg" alt="menu-button" width={100} height={100} class="h-8 w-8 text-black" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="navigation hs-collapse transition-all duration-300 lg:basis-auto basis-full grow hidden items-center justify-center lg:flex mx-auto overflow-hidden mt-6 lg:mt-0 nav-light" id="navbarCollapse">
|
||||
<ul class="navbar-nav flex-col lg:flex-row gap-y-2 flex lg:items-center justify-center" id="navbar-navlist">
|
||||
<li class="nav-item mx-1.5 transition-all text-dark lg:text-black group-[&.is-sticky]:text-dark all duration-300 hover:text-primary [&.active]:!text-primary group-[&.is-sticky]:[&.active]:text-primary">
|
||||
<a class="nav-link inline-flex items-center text-sm lg:text-base font-medium py-0.5 px-2 capitalize" href="/news">产品新闻</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item mx-1.5 transition-all text-dark lg:text-black group-[&.is-sticky]:text-dark duration-300 hover:text-primary [&.active]:!text-primary group-[&.is-sticky]:[&.active]:text-primary">
|
||||
<a class="nav-link inline-flex items-center text-sm lg:text-base font-medium py-0.5 px-2 capitalize" href="/about-us">关于我们</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item mx-1.5 transition-all text-dark lg:text-black group-[&.is-sticky]:text-dark duration-300 hover:text-primary [&.active]:!text-primary group-[&.is-sticky]:[&.active]:text-primary">
|
||||
<a class="nav-link inline-flex items-center text-sm lg:text-base font-medium py-0.5 px-2 capitalize" href="/contact-us">联系我们</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="ms-auto shrink hidden lg:inline-flex gap-2">
|
||||
<a href={extra.app_download} class="py-2 px-6 inline-flex items-center gap-2 rounded-md text-base text-white bg-primary hover:bg-primaryDark transition-all duration-500 font-medium">
|
||||
<Image src="/template_3/download.svg" alt="download" width={100} height={100} class="h-4 w-4 fill-white/40" />
|
||||
<span class="hidden sm:block">下载</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<slot />
|
||||
|
||||
<!-- Footer Start -->
|
||||
<footer class="bg-[#17243A]">
|
||||
<div class="container">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6 pb-16 pt-16">
|
||||
<div class="col-span-full lg:col-span-2">
|
||||
<p class="text-white">官方账号</p>
|
||||
<div>
|
||||
{
|
||||
extra.weibo_offical.address ?
|
||||
<a class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-white hover:bg-primary transition-all duration-300" href={extra.weibo_offical.address}>
|
||||
<Weibo />
|
||||
</a> : ''
|
||||
}
|
||||
{
|
||||
extra.douyin_offical.address ?
|
||||
<a class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-white hover:bg-primary transition-all duration-300" href={extra.douyin_offical.address}>
|
||||
<Douyin />
|
||||
</a> : ''
|
||||
}
|
||||
{
|
||||
extra.baijiahao_offical.address ?
|
||||
<a class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-white hover:bg-primary transition-all duration-300" href={extra.baijiahao_offical.address}>
|
||||
<BaijiahaoLogo />
|
||||
</a> : ''
|
||||
}
|
||||
{
|
||||
extra.toutiaohao_offical.address ?
|
||||
<a class="size-8 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent text-white hover:bg-primary transition-all duration-300" href={extra.toutiaohao_offical.address}>
|
||||
<Toutiaohao />
|
||||
</a> : ''
|
||||
}
|
||||
</div>
|
||||
<div class="mt-6 grid space-y-3">
|
||||
<p class="text-white">24小时客服热线</p>
|
||||
<a class="inline-flex items-center gap-x-4 text-gray-300 hover:text-gray-400 transition-all duration-300" href={`tel:${extra.app_phone}`}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-phone"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
|
||||
{extra.app_phone}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-span-1">
|
||||
<h4 class="font-semibold text-gray-100 uppercase">Company</h4>
|
||||
|
||||
<div class="mt-6 grid space-y-3">
|
||||
<p><a class="inline-flex gap-x-2 text-base text-gray-300 hover:text-gray-400 transition-all duration-300" href="/about-us">关于我们</a></p>
|
||||
<p><a class="inline-flex gap-x-2 text-base text-gray-300 hover:text-gray-400 transition-all duration-300" href="/news">产品新闻</a></p>
|
||||
<p><a class="inline-flex gap-x-2 text-base text-gray-300 hover:text-gray-400 transition-all duration-300" href="/contact-us">联系我们</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="py-4 bg-[#1C2940]">
|
||||
<!-- 1B283F -->
|
||||
<div class="container">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-base text-white">
|
||||
<small>
|
||||
2025© {config.app_name}- <a href="/">{config.app_company}</a></small>
|
||||
</div>
|
||||
<div class="copyright text-base col-xl-4 col-md-8 text-white">
|
||||
<small class="copyright__text">版权所有 © {config.app_company}
|
||||
。保留一切权利。<a href={config.app_filing_url}>{config.app_filing}</a></small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- Footer End -->
|
||||
<!-- Back to top -->
|
||||
<a href="javascript: void(0);" onclick="topFunction()" id="back-to-top" class="back-to-top fixed text-base rounded-md z-10 bottom-8 right-8 h-8 w-8 text-center bg-primary text-white leading-9 justify-center items-center">
|
||||
<!-- <i data-lucide="arrow-up" class="h-4 w-4 text-white stroke-2"></i> -->
|
||||
<img src="/template_3/totop.svg" />
|
||||
</a>
|
||||
|
||||
<!-- Swiper Bundle Js -->
|
||||
<script is:inline src="/template_3/libs/swiper/swiper-bundle.min.js"></script>
|
||||
|
||||
<script is:inline src="/template_3/libs/preline/preline.js"></script>
|
||||
|
||||
<!-- Swiper Js -->
|
||||
<!-- <script is:inline src="../assets/template_3/js/swiper.js"></script> -->
|
||||
<script is:inline src="/template_3/js/swiper.js"></script>
|
||||
|
||||
<!-- Main App Js -->
|
||||
<script is:inline src="/template_3/js/app.js" ></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -32,9 +32,8 @@ export async function onRequest (context: any, next: any) {
|
||||
|
||||
if (!context.locals.is_write) {
|
||||
context.locals.is_write = 1;
|
||||
context.locals.template_number = 2;
|
||||
context.locals.template_config = data;
|
||||
return context.rewrite('/template/' + context.locals.template_number + context.url.pathname);
|
||||
return context.rewrite('/template/' + data.app_template + context.url.pathname);
|
||||
}
|
||||
|
||||
return next();
|
||||
|
||||
@ -15,7 +15,6 @@ if (!data || code !== 0) {
|
||||
return Astro.redirect('/404');
|
||||
}
|
||||
|
||||
console.log(data)
|
||||
---
|
||||
<Layout title={APP_NAME + data.title} description={data.description} keywords={data.keywords}>
|
||||
<main class="news-main">
|
||||
|
||||
@ -9,7 +9,7 @@ if (!slug) {
|
||||
return Astro.redirect('/404');
|
||||
}
|
||||
|
||||
const {code, data} = await newsDetail(slug);
|
||||
const {code, data} = await newsDetail(slug, config.id);
|
||||
|
||||
if (!data || code !== 0) {
|
||||
return Astro.redirect('/404');
|
||||
|
||||
149
src/pages/template/3/about-us.astro
Normal file
149
src/pages/template/3/about-us.astro
Normal file
@ -0,0 +1,149 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout_3.astro";
|
||||
import { getConfig, getExtra } from "../../../../utils/config";
|
||||
import {
|
||||
TP2_COLUMN_ABOUT_US,
|
||||
TP2_COLUMN_ABOUT_US_URL,
|
||||
TP2_COLUMN_INDEX,
|
||||
TP2_COLUMN_INDEX_URL,
|
||||
} from "../../../../utils/const";
|
||||
const config = getConfig(Astro);
|
||||
const extra = getExtra(config.app_extra_tag);
|
||||
const breadcrumb = [
|
||||
{ title: TP2_COLUMN_INDEX, url: TP2_COLUMN_INDEX_URL },
|
||||
{ title: TP2_COLUMN_ABOUT_US, url: TP2_COLUMN_ABOUT_US_URL },
|
||||
];
|
||||
---
|
||||
|
||||
<Layout
|
||||
title={TP2_COLUMN_ABOUT_US + ` - ${config.app_name}`}
|
||||
breadcrumb={breadcrumb}
|
||||
description={`关于我们 - ${config.app_name}`}
|
||||
keywords={config.app_keywords}
|
||||
>
|
||||
<div id="content" class="main" data-site="中国">
|
||||
<main>
|
||||
<div>
|
||||
<!-- 活动与新闻-->
|
||||
<div class="hcomponent-page-info">
|
||||
<div class="news-detail-title">
|
||||
<div class="container-custom fix-p-color">
|
||||
<h1><span>{extra.about_us.title}{config.app_name}</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container-custom hcomponent-share-bar">
|
||||
<div class="container-custom">
|
||||
<ul class="share-box list-unstyled hasLine">
|
||||
<li class="line"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div >
|
||||
<div class="hcomponent-news-detail-content">
|
||||
<div class="news-detail-box container-custom clearfix">
|
||||
<div class="news-detail-content">
|
||||
<Fragment set:html={extra.about_us.content} />
|
||||
<p style="text-align: right;">{config.app_company}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</Layout>
|
||||
<style>
|
||||
|
||||
.main {
|
||||
max-width: 1200px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
flex: 1 1 0%;
|
||||
padding: 5rem;
|
||||
margin: 0px auto;
|
||||
padding-top: 5rem;
|
||||
h1 {
|
||||
span {
|
||||
font-weight: bold;
|
||||
}
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.container-custom {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: #666;
|
||||
font-size: 1em;
|
||||
line-height: 1.95em;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
@media (max-width:767px) {
|
||||
.container-custom>.container-custom {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mt20{
|
||||
margin-top: 20px;
|
||||
}
|
||||
.main .bottom-box .share-box {
|
||||
margin: 20px auto 0 auto;
|
||||
}
|
||||
|
||||
.main .share-box {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 99;
|
||||
}
|
||||
.share-box.list-unstyled:not(.hasLine){
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.main .share-box li .wechat-qrcode {
|
||||
top: 30px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.main .share-box li .wechat-qrcode p {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main .hasLine .line {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #dddddd;
|
||||
top: 0;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.main .share-box.s-bottom {
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
margin: 20px auto 0 auto;
|
||||
}
|
||||
|
||||
.news-detail-box {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
</style>
|
||||
206
src/pages/template/3/contact-us.astro
Normal file
206
src/pages/template/3/contact-us.astro
Normal file
@ -0,0 +1,206 @@
|
||||
---
|
||||
import Layout from "../../../layouts/Layout_3.astro";
|
||||
import { Image } from "astro:assets";
|
||||
import { getConfig, getExtra } from "../../../../utils/config";
|
||||
import {
|
||||
TP2_COLUMN_CONTACT_US,
|
||||
TP2_COLUMN_CONTACT_US_URL,
|
||||
TP2_COLUMN_INDEX,
|
||||
TP2_COLUMN_INDEX_URL,
|
||||
} from "../../../../utils/const";
|
||||
import BaijiahaoLogo from '../../../../public/common/baijiahao.svg'
|
||||
import Toutiaohao from '../../../../public/common/toutiaohao.svg'
|
||||
import Douyin from '../../../../public/common/douyin.svg'
|
||||
import Youxiang from '../../../../public/common/youxiang.svg'
|
||||
const config = getConfig(Astro);
|
||||
const extra = getExtra(config.app_extra_tag)
|
||||
const breadcrumb = [
|
||||
{ title: TP2_COLUMN_INDEX, url: TP2_COLUMN_INDEX_URL },
|
||||
{ title: TP2_COLUMN_CONTACT_US, url: TP2_COLUMN_CONTACT_US_URL }
|
||||
];
|
||||
// 页面描述
|
||||
const desc = extra.contact_us.telephone.map(item => item.number).join('; ');
|
||||
---
|
||||
<Layout
|
||||
title={TP2_COLUMN_CONTACT_US + ` - ${config.app_name}`}
|
||||
description={`${config.app_name}24小时客服电话 - ${desc}`}
|
||||
keywords={config.app_keywords}
|
||||
breadcrumb={breadcrumb}
|
||||
>
|
||||
<main>
|
||||
<div class="contact-container">
|
||||
<h1 style="font-size: 5rem;margin-bottom: 5rem;">{extra.contact_us.title}</h1>
|
||||
<!-- <Fragment set:html={extra.contact_us.content}/> -->
|
||||
<section class="list-box">
|
||||
<h2 class="list-title">在线客服</h2>
|
||||
<ul>
|
||||
{
|
||||
extra.contact_us.telephone.map(e => {
|
||||
return <li class="list-item">
|
||||
<a href={`tel:${e.number}`}>
|
||||
<div class="item-content">
|
||||
<Image height={50} width={50} src="/template_2/contact-us/hotline.png" alt="联系热线"/>
|
||||
<div class="txt">
|
||||
<h3 style="margin-left: 1rem;font-weight: bold;">{e.number}</h3>
|
||||
<h4 style="margin-left: 1rem;">24小时全国热线</h4>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
|
||||
{extra.contact_us.email.length > 0 ? <h2 class="list-title">联系邮箱</h2> : ''}
|
||||
<ul>
|
||||
{
|
||||
extra.contact_us.email.map(e => {
|
||||
return <li class="list-item">
|
||||
<a href={`tel:${e.address}`}>
|
||||
<div class="item-content">
|
||||
<Image height={50} width={50} src="/template_2/contact-us/youxiang.svg" alt="联系邮箱"/>
|
||||
<div class="txt">
|
||||
<h3 style="margin-left: 1rem;font-weight: bold;">{e.address}</h3>
|
||||
<h4 style="margin-left: 1rem;"></h4>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li>
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
|
||||
<h2 class="list-title">官方媒体平台</h2>
|
||||
<ul>
|
||||
{
|
||||
extra.weibo_offical.address ?
|
||||
<li class="list-item">
|
||||
<a href={extra.weibo_offical.address} target="blank">
|
||||
<div class="item-content">
|
||||
<span class="icon-lazy font-ico-weibo" data-name="font-ico-weibo"></span>
|
||||
<div class="txt">
|
||||
<h3>{extra.weibo_offical.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li> : ''
|
||||
}
|
||||
{
|
||||
extra.gongzhonghao_offical.address ?
|
||||
<li class="list-item">
|
||||
<a href={extra.gongzhonghao_offical.address} target="blank">
|
||||
<div class="item-content">
|
||||
<span class="icon-lazy font-ico-weixin" data-name="font-ico-weixin"></span>
|
||||
<div class="txt">
|
||||
<h3>{extra.gongzhonghao_offical.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li> : ''
|
||||
}
|
||||
{
|
||||
extra.baijiahao_offical.address ?
|
||||
<li class="list-item">
|
||||
<a href={extra.baijiahao_offical.address} target="blank">
|
||||
<div class="item-content">
|
||||
<BaijiahaoLogo class="icon-lazy" />
|
||||
<div class="txt">
|
||||
<h3>{extra.baijiahao_offical.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li> : ''
|
||||
}
|
||||
{
|
||||
extra.toutiaohao_offical.address ?
|
||||
<li class="list-item">
|
||||
<a href={extra.toutiaohao_offical.address} target="blank">
|
||||
<div class="item-content">
|
||||
<Toutiaohao class="icon-lazy"/>
|
||||
<div class="txt">
|
||||
<h3>{extra.toutiaohao_offical.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li> : ''
|
||||
}
|
||||
{
|
||||
extra.douyin_offical.address ?
|
||||
<li class="list-item">
|
||||
<a href={extra.douyin_offical.address} target="blank">
|
||||
<div class="item-content">
|
||||
<Douyin class="icon-lazy"/>
|
||||
<div class="txt">
|
||||
<h3>{extra.douyin_offical.name}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</li> : ''
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
|
||||
.fa-chevron-right:before {
|
||||
content: ">"
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem ;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-left: 1rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin-left: 1rem;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.icon-lazy {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
.contact-container {
|
||||
padding-top: 5rem;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
border-top: 0.01rem solid #d8d8d8;
|
||||
}
|
||||
|
||||
.item-content{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.txt {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.list-box .list-item>a {
|
||||
padding: 1.5rem;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
/* height: 1.08rem; */
|
||||
}
|
||||
</style>
|
||||
370
src/pages/template/3/index.astro
Normal file
370
src/pages/template/3/index.astro
Normal file
@ -0,0 +1,370 @@
|
||||
---
|
||||
import "swiper/swiper-bundle.css";
|
||||
import Layout from "../../../layouts/Layout_3.astro";
|
||||
import ImageXiazai from '../../../../public/template_2/xiazai.svg';
|
||||
import { Image } from 'astro:assets';
|
||||
import { getConfig, getTp3Extra } from "../../../../utils/config";
|
||||
import { TP2_COLUMN_ABOUT_US, TP2_COLUMN_INDEX, TP2_COLUMN_INDEX_URL } from "../../../../utils/const";
|
||||
import { newsIndex } from "../../../../utils/rpc";
|
||||
const config = getConfig(Astro)
|
||||
const extra = getTp3Extra(config.app_extra_tag);
|
||||
const {code, data} = await newsIndex(config.id, 3);
|
||||
|
||||
const breadcrumb = [{
|
||||
title: TP2_COLUMN_INDEX,
|
||||
url: TP2_COLUMN_INDEX_URL
|
||||
}]
|
||||
---
|
||||
|
||||
<Layout
|
||||
title={`${config.app_name}`}
|
||||
description={config.app_description}
|
||||
keywords={config.app_keywords}
|
||||
breadcrumb={breadcrumb}
|
||||
>
|
||||
<!-- =========== Hero Section Start =========== -->
|
||||
<section
|
||||
class="sc1 relative pt-32 pb-32 overflow-x-hidden from-slate-500/10 bg-[url(../images/home/bg-1.png)] bg-no-repeat bg-cover"
|
||||
id="home">
|
||||
<div class="container">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6 items-center">
|
||||
<div class="text-sm py-20 px-10">
|
||||
<span
|
||||
class="inline-flex py-2 text-lg text-black font-medium items-center justify-center rounded-full">
|
||||
<i data-lucide="minus"></i> {extra?.sc1?.text1}</span>
|
||||
<h1 class="md:text-6xl/tight text-4xl text-dark tracking-normal leading-normal font-bold mb-4 mt-6">
|
||||
{extra?.sc1?.text2} <span class="text-primary"> {config.app_name} </span></h1>
|
||||
<p class="text-base font-medium text-muted leading-7 mt-5 capitalize">{extra?.sc1?.text3}</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 pt-2 sm:mt-0 sm:pt-0 relative">
|
||||
<img src="template_3/furniture.png" alt="" class="h-[600px] max-w-full mx-auto">
|
||||
|
||||
<div class="absolute bottom-3/4 -end-14 2xl:end-8 hidden xl:block">
|
||||
<div class="flex items-center gap-2 p-2 pe-6 rounded-full bg-white shadow-2xl">
|
||||
<div class="rounded-full bg-primary h-9 w-9 items-center justify-center flex">
|
||||
<Image src="/template_3/book.svg" class="h-6 w-6 text-white" width={100} height={100} alt="客服"/>
|
||||
</div>
|
||||
<div class="">
|
||||
<h6 class="text-base font-medium text-default-900">{extra?.sc1?.text5}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="absolute bottom-28 start-6 hidden xl:block">
|
||||
<div class="flex items-center gap-2 p-2 pe-6 rounded-full bg-white shadow-2xl">
|
||||
<div class="rounded-full bg-primary h-9 w-9 items-center justify-center flex">
|
||||
<Image src="/template_3/kefu.svg" class="h-6 w-6 text-white" width={100} height={100} alt="客服"/>
|
||||
</div>
|
||||
<div class="">
|
||||
<h6 class="text-base font-medium text-default-900">{extra?.sc1?.text4}</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Start sc2 -->
|
||||
<section id="services" class="py-20">
|
||||
<div class="container">
|
||||
<div class="max-w-2xl mx-auto text-center">
|
||||
<span
|
||||
class="text-sm text-primary uppercase font-semibold tracking-wider text-default-950">{extra?.sc2?.text1}</span>
|
||||
<h2 class="text-3xl md:text-4xl/tight font-semibold text-black mt-4">{extra?.sc2?.text2}</h2>
|
||||
<p class="text-base font-medium mt-4 text-muted">{extra?.sc2?.text3}</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-x-3 gap-y-6 md:gap-y-12 lg:gap-y-24 md:pt-20 pt-12">
|
||||
|
||||
<div class="text-center">
|
||||
<div class="flex items-center justify-center">
|
||||
<div
|
||||
class="items-center justify-center flex bg-primary/10 rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
|
||||
<Image src={`/template_3/sc2_1.svg`} height={100} width={100} alt="pic" class="h-10 w-10 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-xl font-semibold pt-4">{extra?.sc2?.text4}</h1>
|
||||
<p class="text-base text-gray-600 mt-2">{extra?.sc2?.text5}</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="flex items-center justify-center">
|
||||
<div
|
||||
class="items-center justify-center flex bg-primary/10 rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
|
||||
<Image src={`/template_3/sc2_2.svg`} height={100} width={100} alt="pic" class="h-10 w-10 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-xl font-semibold pt-4">{extra?.sc2?.text6}</h1>
|
||||
<p class="text-base text-gray-600 mt-2">{extra?.sc2?.text7}</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="flex items-center justify-center">
|
||||
<div
|
||||
class="items-center justify-center flex bg-primary/10 rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
|
||||
<Image src={`/template_3/sc2_3.svg`} height={100} width={100} alt="pic" class="h-10 w-10 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-xl font-semibold pt-4">{extra?.sc2?.text8}</h1>
|
||||
<p class="text-base text-gray-600 mt-2">{extra?.sc2?.text9}</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="flex items-center justify-center">
|
||||
<div
|
||||
class="items-center justify-center flex bg-primary/10 rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
|
||||
<Image src={`/template_3/sc2_4.svg`} height={100} width={100} alt="pic" class="h-10 w-10 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-xl font-semibold pt-4">{extra?.sc2?.text10}</h1>
|
||||
<p class="text-base text-gray-600 mt-2">{extra?.sc2?.text11}</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="flex items-center justify-center">
|
||||
<div
|
||||
class="items-center justify-center flex bg-primary/10 rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
|
||||
<Image src={`/template_3/sc2_5.svg`} height={100} width={100} alt="pic" class="h-10 w-10 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-xl font-semibold pt-4">{extra?.sc2?.text12}</h1>
|
||||
<p class="text-base text-gray-600 mt-2">{extra?.sc2?.text13}</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="flex items-center justify-center">
|
||||
<div
|
||||
class="items-center justify-center flex bg-primary/10 rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
|
||||
<Image src={`/template_3/sc2_6.svg`} height={100} width={100} alt="pic" class="h-10 w-10 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-xl font-semibold pt-4">{extra?.sc2?.text14}</h1>
|
||||
<p class="text-base text-gray-600 mt-2">{extra?.sc2?.text15}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="flex items-center justify-center">
|
||||
<div
|
||||
class="items-center justify-center flex bg-primary/10 rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
|
||||
<Image src={`/template_3/sc2_7.svg`} height={100} width={100} alt="pic" class="h-10 w-10 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-xl font-semibold pt-4">{extra?.sc2?.text16}</h1>
|
||||
<p class="text-base text-gray-600 mt-2">{extra?.sc2?.text17}</p>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="flex items-center justify-center">
|
||||
<div
|
||||
class="items-center justify-center flex bg-primary/10 rounded-[49%_80%_40%_90%_/_50%_30%_70%_80%] h-20 w-20 border">
|
||||
<Image src={`/template_3/sc2_8.svg`} height={100} width={100} alt="pic" class="h-10 w-10 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-xl font-semibold pt-4">{extra?.sc2?.text18}</h1>
|
||||
<p class="text-base text-gray-600 mt-2">{extra?.sc2?.text19}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<!-- Services End -->
|
||||
|
||||
<!-- Feature Start -->
|
||||
<section id="features" class="py-20">
|
||||
<div class="container">
|
||||
|
||||
<div class="grid lg:grid-cols-2 items-center gap-6">
|
||||
<div class="flex items-center">
|
||||
<img src="template_3/feature.jpg" class="h-[650px] rounded-xl mx-auto" alt="feature section">
|
||||
</div>
|
||||
|
||||
<div class="lg:ms-5 ms-8">
|
||||
<span class="text-sm text-primary uppercase font-semibold tracking-wider text-default-950">{extra?.sc3?.text1}</span>
|
||||
<h2 class="text-3xl md:text-4xl/tight font-semibold text-black mt-4">{extra?.sc3?.text2}</h2>
|
||||
<hr class="border-gray-200 my-6">
|
||||
</hr>
|
||||
|
||||
<div class="flex items-start gap-5">
|
||||
<div>
|
||||
<div
|
||||
class="w-12 h-12 rounded-full border border-dashed border-primary/40 bg-primary/10 flex items-center justify-center">
|
||||
<Image src={`/template_3/sc3_1.svg`} height={24} width={24} alt="pic" class="text-base text-blue-600" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="text-xl font-semibold">{extra?.sc3?.text3}</h4>
|
||||
<p class="text-base font-normal text-gray-500 mt-2">{extra?.sc3?.text4}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-5 mt-8">
|
||||
<div>
|
||||
<div
|
||||
class="w-12 h-12 rounded-full border border-dashed border-primary/40 bg-primary/10 flex items-center justify-center">
|
||||
<Image src={`/template_3/sc3_2.svg`} height={24} width={24} alt="pic" class="text-base text-blue-600" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="text-xl font-semibold">{extra?.sc3?.text5}</h4>
|
||||
<p class="text-base font-normal text-gray-500 mt-2">{extra?.sc3?.text6}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="flex items-start gap-5 mt-8">
|
||||
<div>
|
||||
<div
|
||||
class="w-12 h-12 rounded-full border border-dashed border-primary/40 bg-primary/10 flex items-center justify-center">
|
||||
<Image src={`/template_3/sc3_3.svg`} height={24} width={24} alt="pic" class="text-base text-blue-600" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="text-xl font-semibold">{extra?.sc3?.text7}</h4>
|
||||
<p class="text-base font-normal text-gray-500 mt-2">{extra?.sc3?.text8}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Feature End -->
|
||||
|
||||
<!-- About Start -->
|
||||
<section id="about" class="py-20">
|
||||
<div class="container">
|
||||
|
||||
<div class="grid lg:grid-cols-2 items-center gap-6">
|
||||
<div class="lg:ms-5 ms-8">
|
||||
<div>
|
||||
<span
|
||||
class="text-sm text-primary uppercase font-semibold tracking-wider text-default-950">{extra?.sc5?.text1}</span>
|
||||
</div>
|
||||
<h2 class="text-3xl md:text-4xl/tight font-semibold text-black mt-4">{extra?.sc5?.text2}</h2>
|
||||
<p class="text-base font-normal text-muted mt-6">{extra?.sc5?.text3}</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<img src="template_3/feature-iphone.png" class="h-[600px] rounded-xl mx-auto"
|
||||
alt="feature-image">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- About End -->
|
||||
|
||||
<!-- Faqs Start -->
|
||||
<!-- Faqs End -->
|
||||
|
||||
<!-- Testimonial Start -->
|
||||
<section id="testimonial" class="py-20">
|
||||
<div class="container">
|
||||
<div class="">
|
||||
<div class="text-center max-w-xl mx-auto">
|
||||
<span class="text-sm text-primary uppercase font-semibold tracking-wider text-default-950">评价</span>
|
||||
<h2 class="text-3xl md:text-4xl/tight font-semibold mt-4">获得广泛好评</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 gap-6 mt-14 items-center">
|
||||
<div class="relative">
|
||||
<div class="swiper testi-swiper rounded-md relative px-1">
|
||||
<div class="swiper-wrapper">
|
||||
{
|
||||
extra?.sc7?.text1?.map(item => {
|
||||
return <div class="swiper-slide">
|
||||
<div class="p-6 rounded-xl border border-default-200">
|
||||
<h3 class="text-xl font-semibold text-default-950">{item?.title}</h3>
|
||||
<p class="text-base font-normal mt-4 mb-4 text-muted">
|
||||
{item?.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Testimonial End -->
|
||||
|
||||
<!-- Client Start -->
|
||||
<section class="py-20 bg-gray-50">
|
||||
<div class="container relative">
|
||||
<div class="">
|
||||
<div class="text-center max-w-xl mx-auto">
|
||||
<h3 class="text-3xl md:text-4xl/tight font-semibold">{extra?.sc8?.text1}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-6 grid-cols-2 justify-center gap-[30px] mt-14">
|
||||
{
|
||||
extra?.sc8?.logo.map(item => {
|
||||
return <div class="mx-auto py-4">
|
||||
<img src={item.url} class="h-20" alt="">
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Client Start -->
|
||||
|
||||
<!-- Blog Start -->
|
||||
<section id="blog" class="py-20">
|
||||
<div class="container">
|
||||
<div class="">
|
||||
<div class="text-center max-w-xl mx-auto">
|
||||
<span
|
||||
class="text-sm text-primary uppercase font-semibold tracking-wider text-default-950">{extra?.sc9?.text1}</span>
|
||||
<h2 class="text-3xl md:text-4xl/tight font-semibold mt-4">{extra?.sc9?.text2}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-6 mt-14 items-center">
|
||||
{
|
||||
data.map(item => {
|
||||
return <div class="bg-white rounded-xl border">
|
||||
<div class="relative">
|
||||
<img style="aspect-ratio: 4 / 3;object-fit:cover" class="rounded-t-xl" src={item.cover} alt="">
|
||||
</div>
|
||||
<div class="flex py-6 px-6">
|
||||
<div>
|
||||
<a href={`/news/${item.id}`} class="text-xl text-black font-semibold line-clamp-2">{item.title}</a>
|
||||
<p class="mt-4 mb-6 text-gray-500 leading-6 desc">{item.description}</p>
|
||||
|
||||
<div class="flex items-center justify-between gap-3 mt-4">
|
||||
<p class="flex font-medium text-muted">{item.created_at}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Blog End -->
|
||||
</Layout>
|
||||
<style>
|
||||
.desc {
|
||||
-webkit-line-clamp: 1;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
</style>
|
||||
224
src/pages/template/3/news.astro
Normal file
224
src/pages/template/3/news.astro
Normal file
@ -0,0 +1,224 @@
|
||||
---
|
||||
import Layout from '../../../layouts/Layout_3.astro';
|
||||
import { newsIndex } from '../../../../utils/rpc';
|
||||
import { getConfig } from '../../../../utils/config';
|
||||
import { TP2_COLUMN_NEWS, TP2_COLUMN_NEWS_URL, TP2_COLUMN_INDEX, TP2_COLUMN_INDEX_URL } from '../../../../utils/const';
|
||||
const config = getConfig(Astro)
|
||||
const {code, data} = await newsIndex(config.id);
|
||||
---
|
||||
<Layout
|
||||
title={TP2_COLUMN_NEWS + `- ${config.app_name}`}
|
||||
description={`新闻专栏 - ${config.app_name}`}
|
||||
keywords={config.app_keywords}
|
||||
>
|
||||
<main class="v4 main page-news">
|
||||
<div class="news-list-component">
|
||||
<div class="container">
|
||||
<div class="wrap wrap--small">
|
||||
<div class="result-product">
|
||||
<div class="result-product__items news-archive-items">
|
||||
{
|
||||
data.map(news => (
|
||||
<a href={`/news/${news.id}`} title={news.title} class="result-product__item result-product__item--border">
|
||||
<div class="result-product__content">
|
||||
<span class="result-product__label">{news.created_at}</span>
|
||||
<div class="heading result-product__title">{news.title}</div>
|
||||
<p class="result-product__info">{news.description}</p>
|
||||
</div>
|
||||
<div class="result-product__media ">
|
||||
<img class="result-product__image img-lazy show success-img" alt={news.title} src={news.cover} onerror="imgErrorUrl(this)" style="">
|
||||
</div>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</Layout>
|
||||
<style>
|
||||
.page-news {
|
||||
background-color: #fff !important;
|
||||
padding-top: 5rem;
|
||||
.result-product__image {
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.columns-name {
|
||||
font-size: 5rem;
|
||||
padding: 3rem;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767.98px) {
|
||||
.columns-name {
|
||||
font-size: 2rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.result-product__media {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 260px;
|
||||
-ms-flex: 0 0 260px;
|
||||
flex: 0 0 260px;
|
||||
max-width: 260px;
|
||||
height: 173.3px;
|
||||
position: relative
|
||||
}
|
||||
.result-product__image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
cursor: pointer
|
||||
}
|
||||
|
||||
.result-product__item {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.result-product__info {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #7f7f7f;
|
||||
line-height: 1.5
|
||||
}
|
||||
|
||||
.result-product__label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #7f7f7f;
|
||||
line-height: 1.71;
|
||||
display: block;
|
||||
margin-bottom: 8px
|
||||
}
|
||||
|
||||
.result-product__title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
color: #000;
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
max-height: 120px;
|
||||
overflow: hidden
|
||||
}
|
||||
|
||||
.result-product__item--border {
|
||||
border-bottom: 1px solid #ededed
|
||||
}
|
||||
|
||||
.result-product__item {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 32px 0
|
||||
}
|
||||
|
||||
|
||||
.result-product {
|
||||
margin-bottom: 80px
|
||||
}
|
||||
|
||||
.result-product:last-of-type {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
.result-product__items {
|
||||
display: block;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.result-product__item {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
padding: 32px 0
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px) {
|
||||
.no-touch .result-product__item:hover .result-product__title {
|
||||
color:#7f7f7f
|
||||
}
|
||||
|
||||
.no-touch .result-product__item:hover .result-product__image--thumb::before {
|
||||
opacity: .5
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.result-product__media {
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 0 120px;
|
||||
-ms-flex: 0 0 120px;
|
||||
flex: 0 0 120px;
|
||||
height: 90px;
|
||||
background-color: unset
|
||||
}
|
||||
|
||||
.result-product__info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.result-product__title {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.result-product__content {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.result-product__item--border {
|
||||
border-bottom: 1px solid #ededed
|
||||
}
|
||||
|
||||
.result-product__item-title {
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
color: #000;
|
||||
display: block;
|
||||
padding-bottom: 24px;
|
||||
padding-top: 80px
|
||||
}
|
||||
|
||||
.result-product__item-title--big {
|
||||
font-size: 32px;
|
||||
line-height: 1.25;
|
||||
letter-spacing: -0.5px
|
||||
}
|
||||
|
||||
.result-product__label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #7f7f7f;
|
||||
line-height: 1.71;
|
||||
display: block;
|
||||
margin-bottom: 8px
|
||||
}
|
||||
|
||||
.result-product__content-text {
|
||||
position: relative;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
max-width: 730px;
|
||||
padding-right: 20px
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
336
src/pages/template/3/news/[...slug].astro
Normal file
336
src/pages/template/3/news/[...slug].astro
Normal file
@ -0,0 +1,336 @@
|
||||
---
|
||||
import Layout from '../../../../layouts/Layout_3.astro';
|
||||
import { newsDetail } from '../../../../../utils/rpc';
|
||||
import { getConfig } from '../../../../../utils/config';
|
||||
import { TP2_COLUMN_NEWS, TP2_COLUMN_NEWS_URL } from '../../../../../utils/const';
|
||||
const { slug } = Astro.params;
|
||||
const config = getConfig(Astro)
|
||||
if (!slug) {
|
||||
return Astro.redirect('/500');
|
||||
}
|
||||
|
||||
const {code, data} = await newsDetail(slug, config.id);
|
||||
|
||||
if (!data || code !== 0) {
|
||||
return Astro.redirect('/404');
|
||||
}
|
||||
|
||||
const breadcrumb = [{
|
||||
title: '主页',
|
||||
url: '/'
|
||||
}, {title: TP2_COLUMN_NEWS, url: TP2_COLUMN_NEWS_URL}, {title: data.title, url: 'javascript:void(0);'}]
|
||||
---
|
||||
<Layout breadcrumb={breadcrumb} title={`${data.title} - ${config.app_name}`} keywords={data.keywords} description={data.description}>
|
||||
<div>
|
||||
<main class="news-main">
|
||||
<div class="news-container">
|
||||
<article class="news-detail-content">
|
||||
<!-- <span class="news-date">发布于: {data.created_at}</span> -->
|
||||
<h1 class="title" title="标题">{data.title}</h1>
|
||||
<div class="top-icon"></div>
|
||||
<div class="news-content" set:html={data.content}>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="news-navigation">
|
||||
{
|
||||
data.prevNews && (
|
||||
<div>
|
||||
<span>上一篇: </span>
|
||||
<a class="news-prev news-link" title={data.prevNews.title} href={`/news/${data.prevNews.id}`}>{data.prevNews.title}</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
data.nextNews && (
|
||||
<div>
|
||||
<span>下一篇: </span>
|
||||
<a class="news-next news-link" title={data.nextNews.title} href={`/news/${data.nextNews.id}`}>{data.nextNews.title}</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- <aside class="news-sidebar">
|
||||
<div class="related-news">
|
||||
<h3>相关新闻</h3>
|
||||
<ul>
|
||||
{data.about.map(item => (
|
||||
<li>
|
||||
<a class="news-link" title={item.title} href={`/news/${item.id}`}>
|
||||
<span class="related-title">{item.title}</span>
|
||||
{/* <span class="related-date">{item.date}</span> */}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</aside> -->
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<style is:inline>
|
||||
.news-content p {
|
||||
margin: 20px 0;
|
||||
color: #6f6f6f;
|
||||
font-size: 18px;
|
||||
line-height: 32px;
|
||||
}
|
||||
.news-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
||||
main {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
article {
|
||||
width: 50rem;
|
||||
}
|
||||
|
||||
/* .news-main {
|
||||
margin-top: 5rem;
|
||||
} */
|
||||
|
||||
|
||||
.top-icon {
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #e0e0e0
|
||||
}
|
||||
|
||||
.news-date {
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
color: #d0021b;
|
||||
line-height: 17px;
|
||||
margin-bottom: 30px;
|
||||
display: inline-block
|
||||
}
|
||||
|
||||
.news-meta {
|
||||
border-bottom: 1px solid var(--text-primary);
|
||||
color: black;
|
||||
padding-bottom: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
text-align: left;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.news-meta {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.news-meta span{
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* .news-date, .news-author {
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
} */
|
||||
|
||||
.news-author a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
/*
|
||||
.news-date::before {
|
||||
content: '📅';
|
||||
}
|
||||
|
||||
.news-author::before {
|
||||
content: '👤';
|
||||
} */
|
||||
|
||||
.news-tags {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.news-tag {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: white;
|
||||
padding: 0.3rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.9rem;
|
||||
backdrop-filter: blur(4px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.news-tag:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.news-container {
|
||||
/* max-width: 1200px; */
|
||||
/* margin: -2rem auto 0; */
|
||||
/* padding: 0 1.5rem 3rem; */
|
||||
/* display: grid; */
|
||||
/* grid-template-columns: 1fr 320px; */
|
||||
/* gap: 2.5rem; */
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.news-detail-content {
|
||||
border-right: 1px solid var(--text-primary);
|
||||
padding: 3rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.news-content {
|
||||
padding-top: 3rem;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.news-images {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.news-images img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.news-images img:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.news-content p {
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
|
||||
.news-content p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.news-navigation {
|
||||
margin-top: 1rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--divider-color);
|
||||
}
|
||||
|
||||
.news-sidebar {
|
||||
position: sticky;
|
||||
top: 2rem;
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.related-news {
|
||||
padding: 1rem;
|
||||
/* box-shadow: var(--shadow-lg); */
|
||||
}
|
||||
|
||||
.related-news h3 {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--text-primary);
|
||||
}
|
||||
|
||||
.related-news ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.related-news li {
|
||||
/* margin-bottom: 1.2rem;
|
||||
padding-bottom: 1.2rem; */
|
||||
border-bottom: 1px solid var(--divider-color);
|
||||
}
|
||||
|
||||
.related-news li:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.related-news a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
/* color: var(--text-secondary); */
|
||||
/* color: black; */
|
||||
transition: all 0.3s ease;
|
||||
padding: 0.4rem;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.related-news a:hover {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.related-title {
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.related-date {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.news-container {
|
||||
grid-template-columns: 1fr;
|
||||
margin-top: -1rem;
|
||||
}
|
||||
|
||||
.news-sidebar {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
||||
.news-detail-content {
|
||||
padding: 1.5rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.news-share {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.share-btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</Layout>
|
||||
1
src/styles/template_3/icons.min.css
vendored
Normal file
1
src/styles/template_3/icons.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
2171
src/styles/template_3/style.css
Normal file
2171
src/styles/template_3/style.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user