diff --git a/docs/响应式设计指南.md b/docs/响应式设计指南.md new file mode 100644 index 0000000..44bfeef --- /dev/null +++ b/docs/响应式设计指南.md @@ -0,0 +1,488 @@ +# 响应式设计指南 - 不使用媒体查询 + +## 概述 + +本指南介绍如何使用 JavaScript 检测屏幕尺寸来替代传统的 CSS 媒体查询，实现更灵活、更可控的响应式设计。 + +## 解决方案架构 + +### 1. CSS 容器查询 (Container Queries) +- **文件**: `src/assets/css/responsive_without_media.css` +- **优势**: 最新的 CSS 标准，基于容器而非视口 +- **兼容性**: 现代浏览器支持 + +### 2. JavaScript 检测 + 类名控制 +- **文件**: `src/static/responsive_helper.js` +- **优势**: 完全兼容，可编程控制 +- **兼容性**: 所有浏览器支持 + +### 3. Vue2 组件化响应式 +- **文件**: `src/components/ResponsiveLayout.vue` +- **优势**: 组件化，易于维护 +- **兼容性**: Vue2 项目 + +## 使用方法 + +### 基础使用 + +#### 1. 引入响应式助手 + +```html + + +``` + +#### 2. 使用响应式布局组件 + +```vue + + + +``` + +#### 3. 使用响应式 CSS 类 + +```html + +
超小屏幕隐藏
+
小屏幕隐藏
+
中等屏幕隐藏
+
大屏幕隐藏
+
超大屏幕隐藏
+ + +
超小屏幕显示
+
小屏幕显示
+
中等屏幕显示
+
大屏幕显示
+
超大屏幕显示
+``` + +### 高级使用 + +#### 1. 自定义断点 + +```vue + + + +``` + +#### 2. 响应式内容控制 + +```vue + + + +``` + +#### 3. 动态样式调整 + +```vue + + + +``` + +## CSS 类名系统 + +### 响应式断点类名 + +```css +/* 屏幕尺寸类名 */ +.screen-xs { /* 超小屏幕样式 */ } +.screen-sm { /* 小屏幕样式 */ } +.screen-md { /* 中等屏幕样式 */ } +.screen-lg { /* 大屏幕样式 */ } +.screen-xl { /* 超大屏幕样式 */ } +.screen-xxl { /* 超超大屏幕样式 */ } + +/* 容器尺寸类名 */ +.container-xs { /* 超小容器样式 */ } +.container-sm { /* 小容器样式 */ } +.container-md { /* 中等容器样式 */ } +.container-lg { /* 大容器样式 */ } +.container-xl { /* 超大容器样式 */ } +.container-xxl { /* 超超大容器样式 */ } +``` + +### 响应式工具类 + +```css +/* 显示/隐藏 */ +.responsive-hidden-xs { display: none !important; } +.responsive-visible-xs { display: block !important; } + +/* 布局 */ +.responsive-grid { display: grid !important; } +.responsive-flex { display: flex !important; } +.responsive-block { display: block !important; } + +/* 间距 */ +.responsive-m-0 { margin: 0 !important; } +.responsive-p-3 { padding: 1rem !important; } + +/* 文本 */ +.responsive-text-center { text-align: center; } +.responsive-text-primary { color: #3498db; } + +/* 阴影 */ +.responsive-shadow { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } +.responsive-shadow-lg { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); } +``` + +## JavaScript API + +### 全局方法 + +```javascript +// 响应式显示元素 +window.responsiveShow(element, breakpoint); + +// 响应式隐藏元素 +window.responsiveHide(element, breakpoint); + +// 响应式切换类名 +window.responsiveToggleClass(element, className, breakpoint); + +// 获取当前屏幕信息 +const screenInfo = window.responsiveHelper.getCurrentScreenInfo(); +``` + +### 事件监听 + +```javascript +// 监听屏幕尺寸变化 +window.addEventListener('screenSizeChange', (event) => { + const { size, width, height, breakpoint } = event.detail; + + if (size === 'xs' || size === 'sm' || size === 'md') { + // 移动端逻辑 + console.log('切换到移动端'); + } else if (size === 'lg') { + // 平板端逻辑 + console.log('切换到平板端'); + } else { + // 桌面端逻辑 + console.log('切换到桌面端'); + } +}); +``` + +### 断点检测 + +```javascript +// 检查是否匹配特定断点 +const isMobile = window.responsiveHelper.matchesBreakpoint('md'); +const isTablet = window.responsiveHelper.matchesBreakpoint('lg'); +const isDesktop = !window.responsiveHelper.matchesBreakpoint('lg'); +``` + +## 最佳实践 + +### 1. 性能优化 + +```javascript +// 使用防抖优化 resize 事件 +let resizeTimeout; +window.addEventListener('resize', () => { + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(() => { + // 执行响应式逻辑 + }, 100); +}); +``` + +### 2. 渐进增强 + +```javascript +// 检测功能支持 +if (CSS.supports('container-type', 'inline-size')) { + // 使用容器查询 + console.log('支持容器查询'); +} else { + // 回退到 JavaScript 检测 + console.log('使用 JavaScript 检测'); +} +``` + +### 3. 组件化设计 + +```vue + + + + +``` + +### 4. 主题切换 + +```javascript +// 根据屏幕尺寸切换主题 +function switchThemeByScreen() { + const screenInfo = window.responsiveHelper.getCurrentScreenInfo(); + + if (screenInfo.isMobile) { + document.body.classList.add('theme-mobile'); + document.body.classList.remove('theme-desktop'); + } else { + document.body.classList.add('theme-desktop'); + document.body.classList.remove('theme-mobile'); + } +} + +// 监听屏幕变化 +window.addEventListener('screenSizeChange', switchThemeByScreen); +``` + +## 迁移指南 + +### 从媒体查询迁移 + +#### 原来的 CSS +```css +@media (max-width: 768px) { + .mobile-menu { + display: block; + } + .desktop-menu { + display: none; + } +} +``` + +#### 新的 JavaScript 方式 +```javascript +// 在组件中 +mounted() { + this.updateMenuVisibility(); + window.addEventListener('screenSizeChange', this.updateMenuVisibility); +}, +methods: { + updateMenuVisibility() { + const mobileMenu = this.$el.querySelector('.mobile-menu'); + const desktopMenu = this.$el.querySelector('.desktop-menu'); + + if (this.$refs.responsiveLayout.isMobile) { + mobileMenu.style.display = 'block'; + desktopMenu.style.display = 'none'; + } else { + mobileMenu.style.display = 'none'; + desktopMenu.style.display = 'block'; + } + } +} +``` + +#### 新的 CSS 类方式 +```css +/* 使用响应式类名 */ +.mobile-menu { + display: none; +} + +.desktop-menu { + display: block; +} + +/* 移动端显示 */ +.screen-xs .mobile-menu, +.screen-sm .mobile-menu, +.screen-md .mobile-menu { + display: block; +} + +.screen-xs .desktop-menu, +.screen-sm .desktop-menu, +.screen-md .desktop-menu { + display: none; +} +``` + +## 调试和测试 + +### 1. 启用调试模式 + +```vue + + + +``` + +### 2. 控制台调试 + +```javascript +// 查看当前屏幕信息 +console.log(window.responsiveHelper.getCurrentScreenInfo()); + +// 手动触发屏幕变化 +window.dispatchEvent(new Event('resize')); +``` + +### 3. 测试不同屏幕尺寸 + +```javascript +// 模拟不同屏幕尺寸 +function simulateScreenSize(width) { + Object.defineProperty(window, 'innerWidth', { + writable: true, + configurable: true, + value: width + }); + + window.dispatchEvent(new Event('resize')); +} + +// 测试移动端 +simulateScreenSize(375); + +// 测试平板端 +simulateScreenSize(768); + +// 测试桌面端 +simulateScreenSize(1200); +``` + +## 总结 + +通过使用 JavaScript 检测屏幕尺寸替代媒体查询，我们获得了： + +1. **更好的控制性**: 可以编程控制响应式行为 +2. **更高的灵活性**: 支持复杂的响应式逻辑 +3. **更好的性能**: 避免 CSS 重排和重绘 +4. **更好的维护性**: 集中管理响应式逻辑 +5. **更好的兼容性**: 支持所有浏览器 + +这种方案特别适合需要复杂响应式逻辑的现代 Web 应用。 diff --git a/package.json b/package.json index 49374ac..89cf847 100644 --- a/package.json +++ b/package.json @@ -13,9 +13,9 @@ "dependencies": { "es6-promise": "^4.2.5", "image-webpack-loader": "^8.1.0", - "swiper": "^8.4.7", + "swiper": "5.4.5", "vue": "^2.5.17", - "vue-awesome-swiper": "^4.1.1", + "vue-awesome-swiper": "3.1.3", "vue-router": "^3.0.1", "vuex": "^3.0.1" }, diff --git a/src/assets/css/animations.css b/src/assets/css/animations.css new file mode 100644 index 0000000..41cdcc0 --- /dev/null +++ b/src/assets/css/animations.css @@ -0,0 +1,785 @@ +/* 动画效果库 - 为项目添加丰富的动画效果 */ + +/* ===== 基础动画关键帧 ===== */ +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeInDown { + from { + opacity: 0; + transform: translateY(-30px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes fadeInLeft { + from { + opacity: 0; + transform: translateX(-30px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes fadeInRight { + from { + opacity: 0; + transform: translateX(30px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes slideInUp { + from { + transform: translateY(100px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} + +@keyframes slideInDown { + from { + transform: translateY(-100px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} + +@keyframes slideInLeft { + from { + transform: translateX(-100px); + opacity: 0; + } + to { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slideInRight { + from { + transform: translateX(100px); + opacity: 0; + } + to { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes zoomIn { + from { + opacity: 0; + transform: scale(0.3); + } + 50% { + opacity: 1; + } + to { + opacity: 1; + transform: scale(1); + } +} + +@keyframes zoomOut { + from { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 1; + } + to { + opacity: 0; + transform: scale(0.3); + } +} + +@keyframes bounce { + 0%, 20%, 53%, 80%, 100% { + transform: translate3d(0, 0, 0); + } + 40%, 43% { + transform: translate3d(0, -30px, 0); + } + 70% { + transform: translate3d(0, -15px, 0); + } + 90% { + transform: translate3d(0, -4px, 0); + } +} + +@keyframes pulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.05); + } + 100% { + transform: scale(1); + } +} + +@keyframes shake { + 0%, 100% { + transform: translateX(0); + } + 10%, 30%, 50%, 70%, 90% { + transform: translateX(-10px); + } + 20%, 40%, 60%, 80% { + transform: translateX(10px); + } +} + +@keyframes swing { + 20% { + transform: rotate(15deg); + } + 40% { + transform: rotate(-10deg); + } + 60% { + transform: rotate(5deg); + } + 80% { + transform: rotate(-5deg); + } + 100% { + transform: rotate(0deg); + } +} + +@keyframes rotateIn { + from { + transform: rotate(-200deg); + opacity: 0; + } + to { + transform: rotate(0); + opacity: 1; + } +} + +@keyframes flipInX { + from { + transform: perspective(400px) rotate3d(1, 0, 0, 90deg); + opacity: 0; + } + 40% { + transform: perspective(400px) rotate3d(1, 0, 0, -20deg); + } + 60% { + transform: perspective(400px) rotate3d(1, 0, 0, 10deg); + } + 80% { + transform: perspective(400px) rotate3d(1, 0, 0, -5deg); + } + to { + transform: perspective(400px); + opacity: 1; + } +} + +@keyframes flipInY { + from { + transform: perspective(400px) rotate3d(0, 1, 0, 90deg); + opacity: 0; + } + 40% { + transform: perspective(400px) rotate3d(0, 1, 0, -20deg); + } + 60% { + transform: perspective(400px) rotate3d(0, 1, 0, 10deg); + } + 80% { + transform: perspective(400px) rotate3d(0, 1, 0, -5deg); + } + to { + transform: perspective(400px); + opacity: 1; + } +} + +@keyframes lightSpeedIn { + from { + transform: translate3d(100%, 0, 0) skewX(-30deg); + opacity: 0; + } + 60% { + transform: skewX(20deg); + opacity: 1; + } + 80% { + transform: skewX(-5deg); + } + to { + transform: translate3d(0, 0, 0); + opacity: 1; + } +} + +@keyframes rubberBand { + from { + transform: scale(1); + } + 30% { + transform: scaleX(1.25) scaleY(0.75); + } + 40% { + transform: scaleX(0.75) scaleY(1.25); + } + 50% { + transform: scaleX(1.15) scaleY(0.85); + } + 65% { + transform: scaleX(0.95) scaleY(1.05); + } + 75% { + transform: scaleX(1.05) scaleY(0.95); + } + to { + transform: scale(1); + } +} + +@keyframes wobble { + from { + transform: translate3d(0, 0, 0); + } + 15% { + transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); + } + 30% { + transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); + } + 45% { + transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); + } + 60% { + transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); + } + 75% { + transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); + } + to { + transform: translate3d(0, 0, 0); + } +} + +@keyframes tada { + from { + transform: scale3d(1, 1, 1); + } + 10%, 20% { + transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); + } + 30%, 50%, 70%, 90% { + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); + } + 40%, 60%, 80% { + transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); + } + to { + transform: scale3d(1, 1, 1); + } +} + +@keyframes heartBeat { + 0% { + transform: scale(1); + } + 14% { + transform: scale(1.3); + } + 28% { + transform: scale(1); + } + 42% { + transform: scale(1.3); + } + 70% { + transform: scale(1); + } +} + +@keyframes hinge { + 0% { + transform: rotate(0); + transform-origin: top left; + animation-timing-function: ease-in-out; + } + 20%, 60% { + transform: rotate(80deg); + transform-origin: top left; + animation-timing-function: ease-in-out; + } + 40% { + transform: rotate(60deg); + transform-origin: top left; + animation-timing-function: ease-in-out; + } + 80% { + transform: rotate(60deg) translateY(0); + transform-origin: top left; + animation-timing-function: ease-in-out; + } + 100% { + transform: translateY(700px); + } +} + +@keyframes rollIn { + from { + opacity: 0; + transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); + } + to { + opacity: 1; + transform: translate3d(0, 0, 0); + } +} + +@keyframes rollOut { + from { + opacity: 1; + } + to { + opacity: 0; + transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); + } +} + +/* ===== 动画类 ===== */ +.animate { + animation-duration: 1s; + animation-fill-mode: both; +} + +.animate.infinite { + animation-iteration-count: infinite; +} + +.animate.delay-1s { + animation-delay: 1s; +} + +.animate.delay-2s { + animation-delay: 2s; +} + +.animate.delay-3s { + animation-delay: 3s; +} + +.animate.delay-4s { + animation-delay: 4s; +} + +.animate.delay-5s { + animation-delay: 5s; +} + +.animate.fast { + animation-duration: 0.5s; +} + +.animate.slow { + animation-duration: 2s; +} + +.animate.slower { + animation-duration: 3s; +} + +/* ===== 淡入动画 ===== */ +.fade-in { + animation-name: fadeIn; +} + +.fade-in-up { + animation-name: fadeInUp; +} + +.fade-in-down { + animation-name: fadeInDown; +} + +.fade-in-left { + animation-name: fadeInLeft; +} + +.fade-in-right { + animation-name: fadeInRight; +} + +/* ===== 滑入动画 ===== */ +.slide-in-up { + animation-name: slideInUp; +} + +.slide-in-down { + animation-name: slideInDown; +} + +.slide-in-left { + animation-name: slideInLeft; +} + +.slide-in-right { + animation-name: slideInRight; +} + +/* ===== 缩放动画 ===== */ +.zoom-in { + animation-name: zoomIn; +} + +.zoom-out { + animation-name: zoomOut; +} + +/* ===== 特殊效果动画 ===== */ +.bounce { + animation-name: bounce; +} + +.pulse { + animation-name: pulse; +} + +.shake { + animation-name: shake; +} + +.swing { + animation-name: swing; +} + +.rotate-in { + animation-name: rotateIn; +} + +.flip-in-x { + animation-name: flipInX; +} + +.flip-in-y { + animation-name: flipInY; +} + +.light-speed-in { + animation-name: lightSpeedIn; +} + +.rubber-band { + animation-name: rubberBand; +} + +.wobble { + animation-name: wobble; +} + +.tada { + animation-name: tada; +} + +.heart-beat { + animation-name: heartBeat; +} + +.hinge { + animation-name: hinge; +} + +.roll-in { + animation-name: rollIn; +} + +.roll-out { + animation-name: rollOut; +} + +/* ===== 悬停动画 ===== */ +.hover-lift { + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.hover-lift:hover { + transform: translateY(-10px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); +} + +.hover-scale { + transition: transform 0.3s ease; +} + +.hover-scale:hover { + transform: scale(1.05); +} + +.hover-rotate { + transition: transform 0.3s ease; +} + +.hover-rotate:hover { + transform: rotate(5deg); +} + +.hover-glow { + transition: box-shadow 0.3s ease; +} + +.hover-glow:hover { + box-shadow: 0 0 20px rgba(52, 152, 219, 0.5); +} + +.hover-bounce { + transition: transform 0.3s ease; +} + +.hover-bounce:hover { + animation: bounce 0.6s ease; +} + +/* ===== 滚动触发动画 ===== */ +.scroll-animate { + opacity: 0; + transform: translateY(30px); + transition: all 0.8s ease; +} + +.scroll-animate.animate-in { + opacity: 1; + transform: translateY(0); +} + +/* ===== 加载动画 ===== */ +.loading-spinner { + width: 40px; + height: 40px; + border: 4px solid #f3f3f3; + border-top: 4px solid #3498db; + border-radius: 50%; + animation: spin 1s linear infinite; +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.loading-dots { + display: inline-block; +} + +.loading-dots::after { + content: ''; + animation: dots 1.5s steps(5, end) infinite; +} + +@keyframes dots { + 0%, 20% { content: ''; } + 40% { content: '.'; } + 60% { content: '..'; } + 80%, 100% { content: '...'; } +} + +/* ===== 打字机效果 ===== */ +.typewriter { + overflow: hidden; + border-right: 2px solid #333; + white-space: nowrap; + animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite; +} + +@keyframes typing { + from { width: 0; } + to { width: 100%; } +} + +@keyframes blink-caret { + from, to { border-color: transparent; } + 50% { border-color: #333; } +} + +/* ===== 波浪效果 ===== */ +.wave { + position: relative; + overflow: hidden; +} + +.wave::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); + animation: wave 2s infinite; +} + +@keyframes wave { + 0% { left: -100%; } + 100% { left: 100%; } +} + +/* ===== 粒子效果 ===== */ +.particles { + position: relative; +} + +.particle { + position: absolute; + width: 4px; + height: 4px; + background: #3498db; + border-radius: 50%; + animation: particle-float 3s infinite ease-in-out; +} + +.particle:nth-child(1) { animation-delay: 0s; } +.particle:nth-child(2) { animation-delay: 0.5s; } +.particle:nth-child(3) { animation-delay: 1s; } +.particle:nth-child(4) { animation-delay: 1.5s; } +.particle:nth-child(5) { animation-delay: 2s; } + +@keyframes particle-float { + 0%, 100% { + transform: translateY(0) scale(1); + opacity: 1; + } + 50% { + transform: translateY(-20px) scale(1.2); + opacity: 0.7; + } +} + +/* ===== 3D翻转效果 ===== */ +.flip-card { + perspective: 1000px; + height: 200px; +} + +.flip-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.8s; + transform-style: preserve-3d; +} + +.flip-card:hover .flip-card-inner { + transform: rotateY(180deg); +} + +.flip-card-front, .flip-card-back { + position: absolute; + width: 100%; + height: 100%; + backface-visibility: hidden; +} + +.flip-card-back { + transform: rotateY(180deg); +} + +/* ===== 渐变背景动画 ===== */ +.gradient-bg { + background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); + background-size: 400% 400%; + animation: gradient-shift 15s ease infinite; +} + +@keyframes gradient-shift { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } +} + +/* ===== 霓虹灯效果 ===== */ +.neon-text { + color: #fff; + text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6, 0 0 25px #0073e6, 0 0 30px #0073e6, 0 0 35px #0073e6; + animation: neon-pulse 1.5s ease-in-out infinite alternate; +} + +@keyframes neon-pulse { + from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #0073e6, 0 0 20px #0073e6, 0 0 25px #0073e6, 0 0 30px #0073e6, 0 0 35px #0073e6; } + to { text-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 6px #0073e6, 0 0 8px #0073e6, 0 0 10px #0073e6, 0 0 12px #0073e6, 0 0 14px #0073e6; } +} + +/* ===== 响应式动画 ===== */ +@media (prefers-reduced-motion: reduce) { + .animate, + .hover-lift, + .hover-scale, + .hover-rotate, + .hover-glow, + .hover-bounce { + animation: none !important; + transition: none !important; + transform: none !important; + } +} + +/* ===== 动画工具类 ===== */ +.animate-on-scroll { + opacity: 0; + transform: translateY(50px); + transition: all 0.8s ease; +} + +.animate-on-scroll.visible { + opacity: 1; + transform: translateY(0); +} + +.animate-stagger > * { + opacity: 0; + transform: translateY(30px); + transition: all 0.6s ease; +} + +.animate-stagger.visible > * { + opacity: 1; + transform: translateY(0); +} + +.animate-stagger.visible > *:nth-child(1) { transition-delay: 0.1s; } +.animate-stagger.visible > *:nth-child(2) { transition-delay: 0.2s; } +.animate-stagger.visible > *:nth-child(3) { transition-delay: 0.3s; } +.animate-stagger.visible > *:nth-child(4) { transition-delay: 0.4s; } +.animate-stagger.visible > *:nth-child(5) { transition-delay: 0.5s; } +.animate-stagger.visible > *:nth-child(6) { transition-delay: 0.6s; } diff --git a/src/assets/css/common.css b/src/assets/css/common.css index bea54da..7a70cfb 100644 --- a/src/assets/css/common.css +++ b/src/assets/css/common.css @@ -1,688 +1,4 @@ -/* UNCOMMENT IF FORMS ARE NOT WORKING -.linkSupport { - opacity: 0 !important; - pointer-events: none !important; -} -.tempNoHover:hover { - background-color: #fff !important; -} -*/ - -@font-face { - font-family: ProximaNova; - src: url("./font/ProximaNova-Regular.otf") - /*tpa=https://www.pythagoras.se/fonts/ProximaNova-Regular.otf*/ - ; -} - -@font-face { - font-family: ProximaNova; - src: url("./font/ProximaNova-Bold.otf") - /*tpa=https://www.pythagoras.se/fonts/ProximaNova-Bold.otf*/ - ; - font-weight: bold; -} - -@font-face { - font-family: ProximaNovaLight; - src: url("./font/ProximaNova-Light.otf") - /*tpa=https://www.pythagoras.se/fonts/ProximaNova-Light.otf*/ - ; -} - - -/* GENERAL */ - -html, -body { - margin: 0px; - padding: 0px; - height: 100%; - min-width: 300px; - max-width: 100%; -} - -body { - position: relative; - font-family: ProximaNovaLight, Arial, sans-serif; - font-size: 100%; - color: #000; - background-color: #fff; - overflow-x: hidden; -} - -*, -*::after, -*::before { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -a, -a:link, -a:visited, -a:active { - /*color:#000;*/ - text-decoration: underline; - cursor: pointer; - color: #000; -} - -a:hover { - /*color:#ee3126;*/ - text-decoration: none; - color: #000; -} - -h1, -.h1 { - font-size: 1.75em; - line-height: 1.25em; -} - -h2, -.h2 { - font-size: 1.25em; -} - -h3, -.h3 { - font-size: 1.2em; -} - -h4, -.h4 { - font-size: 1em; -} - -.bread { - font-size: 1.2em; - line-height: 120%; -} - -.threeQuarterBread { - font-size: 0.9em; - line-height: 80%; -} - -.halfBread { - font-size: 0.6em; - line-height: 50%; -} - -.leftAligned { - text-align: left; -} - -.rightAligned { - text-align: right; -} - -.strong { - font-weight: bold; -} - -.pageWidth { - margin-left: auto; - margin-right: auto; - max-width: 100%; - padding-left: 3em; - padding-right: 3em; -} - -.bottomShadow { - border-bottom: 1px solid #D3D3D3; - -webkit-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.15); - -moz-box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.15); - box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, 0.15); -} - -.bottomShadowSegment { - -webkit-box-shadow: 0px 9px 12px -8px rgba(0, 0, 0, 0.65); - -moz-box-shadow: 0px 9px 12px -8px rgba(0, 0, 0, 0.65); - box-shadow: 0px 9px 12px -8px rgba(0, 0, 0, 0.65); -} - -.bottomShadowSegmentLight { - -webkit-box-shadow: 0px 9px 12px -8px rgba(0, 0, 0, 0.25); - -moz-box-shadow: 0px 9px 12px -8px rgba(0, 0, 0, 0.25); - box-shadow: 0px 9px 12px -8px rgba(0, 0, 0, 0.25); -} - -.inlineTextIcon { - position: relative; - height: 0.8em; - top: 0.1em; - margin-right: 0.4em; - margin-left: 0.1em; -} - -.contactLinks a { - font-size: 1.0em; - text-decoration: none; -} - - -/* END GENERAL */ - - -/* OVERLAY */ - -#screenOverlay { - display: none; - background: rgba(0, 0, 0, 0.6); - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1001; -} - -#screenOverlayBehindHeader { - display: none; - background: rgba(0, 0, 0, 0.6); - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 999; -} - - -/*FLEX CONTAINERS*/ - -.flexVerticalCenter { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - - -/* HEADER */ - -.header { - position: fixed; - top: 0px; - left: 0px; - right: 0px; - background-color: #fff; - z-index: 1000; -} - -.header>.content {} - -.header>.content>.top { - text-align: right; - position: relative; - height: 2em; -} - -.header>.content>.top>.content {} - -.header>.content>.top>.content>table { - position: absolute; - bottom: 0px; - border-collapse: collapse; - width: 100%; -} - -.header>.content>.top>.content>table>tbody>tr>td { - margin: 0px; - padding: 0px; - white-space: nowrap; -} - -.header>.content>.top>.content>table>tbody>tr>td.contact {} - -.header>.content>.top>.content>table>tbody>tr>td.searchContainer { - text-align: right; - display: none; -} - -.header>.content>.bottom { - height: 5em; - position: relative; - -webkit-transition: all 0.1s; - transition: height 0.1s; -} - -.header.mini>.content>.bottom { - height: 3.5em; -} - -.header>.content>.bottom>table { - border-collapse: collapse; - width: 100%; - height: 100%; -} - -.header>.content>.bottom>table>tbody>tr>td { - margin: 0px; - padding: 0px; -} - -.header>.content>.bottom>table>tbody>tr>td.logoCell { - width: 20%; - vertical-align: top; -} - -.header>.content>.bottom>table>tbody>tr>td.logoCell:hover { - cursor: pointer; -} - -.header>.content>.bottom>table>tbody>tr>td.logoCell>.logo { - margin-top: 0.5em; - height: 2.5em; - width: auto; - -webkit-transition: all .25s; - transition: all .25s; -} - -.header.mini>.content>.bottom>table>tbody>tr>td.logoCell>.logo { - margin-top: 0em; - height: 2em; - width: auto; -} - -.header>.content>.bottom>table>tbody>tr>td.mainMenuCell { - width: 50%; - vertical-align: bottom; - text-align: center; - padding: 0; -} - -.header>.content>.bottom>table>tbody>tr>td.mainMenuCell a { - /*border: 1px solid red; - padding: 0.25em;*/ -} - -.header>.content>.bottom>table>tbody>tr>td.languageCell { - width: 20%; - vertical-align: bottom; - text-align: right; -} - -table.mainMenu { - border-collapse: collapse; - margin: 0 auto; - width: 70%; -} - -table.mainMenu a { - text-decoration: none; - /*display: block; - width: 100%; - height: 100%;*/ -} - -table.mainMenu.alignRight { - margin-right: 0; - margin-left: auto; -} - -table.mainMenu>tbody>tr>td { - position: relative; - padding-left: 0; - padding-right: 0; - padding-top: 0.6em; - padding-bottom: 0.8em; - width: auto; - /*max-width: 5em;*/ - cursor: pointer; -} - -table.mainMenu>tbody>tr>td span.downCaret { - margin: 0 0 0.3em 0.6em; - border: solid black; - border-width: 0 1px 1px 0; - display: inline-block; - padding: 3px; - vertical-align: middle; - transform: rotate(45deg); - -webkit-transform: rotate(45deg); -} - -table.mainMenu>tbody>tr>td.selected { - box-shadow: 0 -3px 0 #2aa2d4 inset; -} - -table.mainMenu>tbody>tr>td:not(.selected):hover { - background-color: #fafafa; - border-bottom-color: #fafafa; - border-top-left-radius: 10px; - border-top-right-radius: 10px; - color: #545454; -} - -table.mainMenu>tbody>tr>td>.dropDown { - display: none; - width: 100%; - text-align: left; - position: absolute; - top: 100%; - margin-top: 0; - left: 0px; - background-color: #fff; - min-width: 10em; - z-index: -1; - padding: 1em; - white-space: nowrap; - border-radius: 0 0 4px 4px; -} - -table.mainMenu>tbody>tr>td:hover>.dropDown { - /*display:block;*/ -} - -table.mainMenu>tbody>tr>td>.dropDown>a { - display: block; - padding: 0.75em; - text-decoration: none; - vertical-align: middle; -} - -table.mainMenu>tbody>tr>td>.dropDownRight { - margin-left: -2.5em; -} - -table.mainMenu>tbody>tr>td>.dropDown>a:not(.languageDisabled):hover { - background-color: #fafafa; - color: #545454; - text-decoration: none; -} - -table.mainMenu>tbody>tr>td>.dropDown>a.selected { - font-weight: bold; -} - -table.mainMenu>tbody>tr>td>.droppedDown { - border-top: 3px solid #2aa2d4; -} - -a.languageDisabled { - color: grey; - cursor: default; -} - - -/*.languages .dropDown { - background: red; -}*/ - -table.mainMenu>tbody>tr>td>.dropDown>a>img.languageFlag { - height: 1.0em; - margin-right: 0.6em; - vertical-align: middle; -} - -a.languageDisabled>img.languageFlag { - -webkit-filter: grayscale(100%); - filter: grayscale(100%); -} - -input[type="text"], -input[type="email"], -textarea { - font-size: 1.2em; - border: 1px solid #e7e7e7; - border-radius: 4px; - padding: 0.2em 0.5em; - width: 100%; -} - -input[type="text"]::-webkit-input-placeholder { - color: #ccc; -} - -input[type="text"]::-moz-placeholder { - color: #ccc; -} - -input[type="text"]:-ms-input-placeholder { - color: #ccc; -} - -input[type="text"]:-moz-placeholder { - color: #ccc; -} - -input[type="text"].search { - background-image: url("../img/svg/lookingglass.svg") - /*tpa=https://www.pythagoras.se/images/lookingglass.svg*/ - ; - background-repeat: no-repeat; - background-position: 96% center; - background-size: auto 55%; - padding-right: 40px; -} - -.banner { - position: relative; - margin-top: 7em; - z-index: 0; - background-color: #ccc; - margin-bottom: 0; - overflow: hidden; -} - -.banner, -.banner * { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.banner .carousel { - position: absolute; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; -} - -.banner .carousel>.items {} - -.banner .carousel>.items>.item { - position: absolute; - top: 0px; - bottom: 0px; - left: 0px; - right: 0px; - background-repeat: no-repeat; - background-size: cover; - background-position: center; -} - -.banner .carousel>.items>#banner0 { - background-image: url("../img/banner_index0.png") - /*tpa=https://www.pythagoras.se/images/banner_index0.jpg*/ - ; -} - -.banner .carousel>.items>#banner1 { - background-image: url("../img/banner_index1.png") - /*tpa=https://www.pythagoras.se/images/banner_index1.jpg*/ - ; -} - -.banner .carousel>.items>#banner2 { - background-image: url("../img/banner_index2.png") - /*tpa=https://www.pythagoras.se/images/banner_index2.jpg*/ - ; -} - -.banner .carousel>.items>#banner3 { - background-image: url("../img/banner_index3.png") - /*tpa=https://www.pythagoras.se/images/banner_index3.jpg*/ - ; -} - -.banner .carousel>.infoBoxes>.infoBox { - position: absolute; - height: 100%; - width: 50%; - /* background-color:rgba(0,0,0,1);*/ - color: #000; - text-align: right; -} - -.banner .carousel>.infoBoxes>.fromLeft { - left: 23%; -} - -.banner .carousel>.infoBoxes>.fromRight { - right: -50%; -} - -.banner .carousel>.infoBoxes>.infoBox>div.infoBoxContent { - text-align: left; - position: absolute; - top: 50%; - left: 0; - -webkit-transform: translate(0, -50%); - transform: translate(0, -50%); - /*border: 1px solid orange*/ -} - -.banner .carousel>.infoBoxes>.fromLeft>div.infoBoxContent { - padding-left: 20%; -} - -.banner .carousel>.infoBoxes>.fromRight>div.infoBoxContent { - padding-right: 20%; -} - -.banner .carousel>.infoBoxes>.infoBox>div.infoBoxContent>.infoBoxHead { - margin-bottom: 1.2em; -} - -.banner .carousel>.infoBoxes>.infoBox>div.infoBoxContent>.infoBoxHead>.infoBoxTitle, -#mobileInfoBoxes .infoBoxTitle, -.contentPage .bannerBox .bannerBoxTitle { - font-size: 3em; - font-weight: bold; - display: inline-block; - vertical-align: middle; -} - -.banner .carousel>.infoBoxes>.infoBox>div.infoBoxContent>.infoBoxHead>.triangleRight, -#mobileInfoBoxes .triangleRight, -.contentPage .bannerBox .triangleRight { - display: inline-block; - vertical-align: middle; - width: 0; - height: 0; - border-top: 1em solid transparent; - border-bottom: 1em solid transparent; - border-left: 1em solid #2aa2d4; - margin-right: 1em; -} - -.banner .carousel>.infoBoxes>.fromLeft>div.infoBoxContent>div.bread { - margin-right: 0 -} - -.banner .carousel>.infoBoxes>.infoBox>div.infoBoxContent>.seeMoreContainer { - text-align: right; - margin-top: 3em; -} - -.banner .carousel>.infoBoxes>.infoBox>div.infoBoxContent>.seeMoreContainer>.linkSeeMore { - color: black; - padding: 1em 2em; - border: 1px solid black; - border-radius: 5px; - text-decoration: none; -} - -.banner .carousel>.infoBoxes>.fromLeft>div.infoBoxContent>.seeMoreContainer>.linkSeeMore { - /* background: orange; - margin-right: 12em;*/ -} - -.banner .carousel>.infoBoxes>.infoBox>table.infoBoxTable { - height: 100%; - width: auto; - margin-right: 2em; - margin-left: auto; - text-align: left; -} - -.banner .carousel>.controls>.directionControls>.directionControl { - position: absolute; - top: 50%; - transform: translate(0, -50%); -} - -.banner .carousel>.controls>.directionControls>.directionControl>img { - background-color: rgba(255, 255, 255, 0.7); - border-radius: 4px; - height: 3em; - padding: 1em 2em; - cursor: pointer; -} - -.banner .carousel>.controls>.directionControls>.directionControl>img:hover { - -webkit-filter: invert(100%); - filter: invert(100%); -} - -.banner .carousel>.controls>.directionControls>.directionControl.previous { - left: -.75em; -} - -.banner .carousel>.controls>.directionControls>.directionControl.next { - right: -.75em; -} - -.banner .carousel>.controls>.directionControls>.directionControl.previous>img { - -webkit-transform: rotate(90deg); - transform: rotate(90deg); -} - -.banner .carousel>.controls>.directionControls>.directionControl.next>img { - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); -} - -.banner .carousel>.controls>.dotControls { - position: absolute; - left: 0px; - right: 0px; - bottom: 4.5em; - text-align: center; -} - -.banner .carousel>.controls>.dotControls>.dotControl { - display: inline-block; - width: 0.8em; - height: 0.8em; - background-color: #fff; - border-radius: 50%; - margin-left: 0.25em; - margin-right: 0.25em; - border: 1px solid transparent; - cursor: pointer; -} - -.banner .carousel>.controls>.dotControls>.dotControl.selected { - background-color: #000; -} - -.banner .carousel>.controls>.dotControls>.dotControl:not(.selected):hover { - background-color: #ccc; - border-color: #a8a8a8; -} .scrollToContentWrapper { height: 6em; @@ -721,1858 +37,3 @@ input[type="text"].search { .scrollToContentWrapper>a.scrollToContent>img { height: 1.0em; } - -#mobileInfoBoxes { - width: 90%; - margin: 0 auto 2em auto; - display: none; -} - -#mobileInfoBoxes .infoBoxHead { - margin-bottom: 1em; -} - -.page {} - -.pageBoxes { - width: 70%; - padding: 0; - margin: 0 auto; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.pageBoxes .box { - width: 31%; - height: 30em; - margin-bottom: 2em; - text-align: center; - overflow: hidden; - background-repeat: no-repeat; - background-size: cover; - background-position: center center; - vertical-align: bottom; - position: relative; -} - -.pageBoxes .box:last-child { - margin-bottom: 0; -} - -.pageBoxes .box>.boxTableHeader { - width: 100%; - height: 22%; - padding: 0 1em; - background-color: rgba(0, 0, 0, 0.8); - color: #fff; - -webkit-transition: height 0.25s; - transition: height 0.25s; - position: absolute; - bottom: 0; - left: 0; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -ms-flex-pack: center; - justify-content: center; -} - -.pageBoxes .box:hover>.boxTableHeader { - height: 100%; -} - -.pageBoxes .box>a { - display: block; - position: absolute; - cursor: pointer; - top: 0px; - left: 0px; - bottom: 0px; - right: 0px; -} - - -/*.cookiesInfo { - position:fixed; - left:0em; - right:0em; - bottom:0px; - padding:0.5em; - background-color:#000; - color:#fff; - text-align:center; -} - - -.cookiesInfo > input[type=button] { - background-color:#2293e2; - border-radius:10px; - padding:0.6em 1.2em; - border:0px none; - color:#fff; - margin-left:6em; - font-size:inherit; - cursor:pointer; -}*/ - - -/* COOKIES COMPLIANCE - OVERRIDE DEFAULT STYLES */ - -.cc-window { - background: #042129 !important; - border-radius: 0 !important; -} - -.cc-compliance a { - text-decoration: none !important; -} - - -/* FOOTER */ - -.footer { - margin-top: 5em; - font-size: 0.9em; -} - -.footer>.row1 { - color: #fff; - background-color: #2c3b44; - position: relative; - overflow: hidden; -} - -.footer>.row1 table.footerTable { - width: 100%; - margin: 0 auto; - border-collapse: separate; - border-spacing: 2em; - table-layout: fixed; - padding-left: 8em; -} - -.footer>.row1 table.footerTable>thead { - text-align: left; -} - -.footer>.row1 table.footerTable thead th { - font-weight: normal; - border-bottom: 1px solid #2aa2d4; - padding-bottom: 0.4em; -} - -.footer>.row1 table.footerTable thead th.desktop { - border-bottom: none; -} - -.footer>.row1 table.footerTable>tbody {} - -.footer>.row1 table.footerTable>tbody>tr>td { - width: 25%; -} - -.footer>.row1 table.footerTable table.addressTable { - width: 100%; - /*table-layout:fixed;*/ - border-collapse: collapse; - padding-bottom: 1em; -} - -.footer>.row1 table.footerTable table.addressTable>tbody>tr>td:nth-child(1) { - width: 0px; - padding-right: 0.5em; - text-align: center; -} - -.footer>.row1 table.footerTable table.addressTable>tbody>tr>td:nth-child(2) { - width: 100%; -} - -.footer>.row1 table.footerTable table.addressTable img.icon { - /*width:1em;*/ - height: 1em; - width: auto; -} - -.footer>.row1 table.footerTable table.addressTable a, -.footer>.row1 table.footerTable ul.quickLinks>li>a { - color: white; - /*text-decoration: underline;*/ - text-decoration: none; - border-bottom: 1px solid rgba(255, 255, 255, 0.8); - display: inline-block; - line-height: 0.9; -} - -.footer>.row1 table.footerTable td.quickLinksContainer { - width: 25%; - vertical-align: top; -} - -.footer>.row1 table.footerTable ul.quickLinks { - list-style: none; - padding: 0; -} - -.footer>.row1 table.footerTable ul.quickLinks>li { - color: #fff; - margin-bottom: 1em; -} - -.footer>.row1 .mobileFooterTitle { - border-bottom: 1px solid #2aa2d4; - margin-top: 1em; - padding-bottom: 0.3em; - margin-bottom: 1.5em; - margin-right: 2em; -} - -.footer>.row1 .aaaWrapper { - margin-bottom: 2em; - text-align: center; -} - -.footer>.row1 .aaaWrapper>img.aaa { - width: 8em; -} - -.footer>.row2 { - text-align: center; - padding-top: 0.75em; - padding-bottom: 0.75em; - color: #fff; - background-color: #22323b; -} - - -/* END FOOTER */ - - -/* FORMS */ - -#forms { - display: none; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - z-index: 1002; -} - -#forms>.formContainer>span.btnQuitForm { - position: absolute; - font-size: 2em; - line-height: 1em; - top: 0.5em; - right: 1em; - cursor: pointer; -} - -#forms>.formContainer>span.btnQuitForm:hover { - color: #737373; -} - -#forms .formResultContainer { - padding: 6em 0; -} - -#forms>.formContainer { - position: relative; - background: #fff; - margin: 1em auto; - text-align: center; - font-size: 0.875em; - /*-webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box;*/ -} - -#forms>.formContainer>a { - text-decoration: none; -} - -#forms>.formContainer h1 { - font-size: 2.0em; - margin-top: 0; - font-weight: normal; -} - -#forms>.formContainer form { - position: relative; - margin-top: 2em; - margin-bottom: 1em; -} - -#forms>.formContainer label { - display: block; - text-align: left; - margin-bottom: 0.5em; -} - -#forms>.formContainer form label span.required { - color: #000; -} - -#forms>.formContainer form input { - margin-bottom: 0.6em; -} - -#forms>.formContainer form input[type="text"] { - width: 100%; -} - -#forms>.formContainer form textarea { - display: block; - width: 100%; - font-family: ProximaNova, Arial, sans-serif; - overflow: hidden; - resize: none; - height: 4em; - margin-bottom: 0.5em; -} - -#forms>.formContainer form div.formBottom { - position: relative; - width: 100%; - text-align: left; - margin-top: 0.6em; - height: 2.3em; - margin-bottom: 2em; -} - -#forms>.formContainer form input[type="submit"] { - background: #000; - color: white; - border-radius: 0.3em; - border: none; - padding: 0.5em 4em; - position: absolute; - right: 0; - top: 1em; -} - -#forms>.formContainer h3.formContactTitle { - margin-bottom: 0.2em; -} - - -/* SUPPORT FORM */ - -#forms>#formSupportContainer { - display: none; - width: 40%; - padding: 2.5em 4em; -} - - -/* END SUPPORT FORM */ - - -/* CONTACT FORM */ - -#forms>#formContactContainer { - display: none; - width: 45%; - padding: 3em 0; - background: white; -} - -#forms>#formContactContainer a:hover { - color: #545454; -} - -#forms>#formContactContainer .icon { - height: 1.2em; - margin-right: 0.5em; -} - -#forms>#formContactContainer .iconSmall { - height: 1.0em; - margin-right: 0.5em; -} - -#forms>#formContactContainer>table.contactTable { - border-collapse: collapse; - width: 100%; -} - -#forms>#formContactContainer>table.contactTable>tbody>tr>td.contactColumn { - width: 50%; - padding: 0 5em; - vertical-align: top; -} - -#forms>#formContactContainer>table.contactTable>tbody>tr>td.contactColumn:first-child { - border-right: 1px solid #F0F0F0; -} - -#forms>#formContactContainer>table.contactTable>tbody>tr>td.contactColumn>h1 { - margin-bottom: 0; -} - -#forms>#formContactContainer>table.contactTable>tbody>tr>td.contactColumn>p.contactSubtitle { - margin: 0 auto 2em 0; -} - -#forms>#formContactContainer>table.contactTable form label { - font-size: 1.2em; -} - - -/* LOCATION */ - -#forms>#formContactContainer .ourLocation { - position: relative; - margin-bottom: 0.5em; -} - -#forms>#formContactContainer .ourLocation>#locMap { - width: 100%; -} - -#forms>#formContactContainer .ourLocation>#locIcon { - position: absolute; - top: 50%; - left: 50%; - -webkit-transform: translate(-50%, -50%); - transform: translate(-50%, -50%); - height: 4em; -} - -#forms>#formContactContainer .contactSummaryTable { - text-align: left; -} - -#forms>#formContactContainer .contactSummaryTable td { - height: 1.2em; - margin-right: 0.5em; - vertical-align: top; - padding-bottom: 0.5em; -} - -#forms>#formContactContainer .contactSummaryTable td a { - text-decoration: none; -} - -#forms>#formContactContainer .contactSummaryTable h3 { - margin-top: 0; - margin-bottom: 0.2em; -} - - -/* END LOCATION */ - - -/* END CONTACT FORM */ - - -/* END FORMS */ - - -/* DESKTOP */ - - -/* DESKTOP */ - - -/* MOBILE */ - -#mobile_indicator, -#phone_indicator { - display: none; -} - -.mobile { - display: none; -} - - -/* MOBILE MENUS */ - -.headerMobileMenu { - display: none; - position: absolute; - width: 100%; - background-color: transparent; - z-index: 2000; - overflow: hidden; - border-top: 1px solid #DCDCDC; -} - -.headerMobileMenu>div.menuDummy { - display: inline-block; - width: 50%; -} - -.headerMobileMenu>div.menuContent { - display: inline-block; - width: 50%; - margin-left: auto; - background: white; - padding: 0 2.4em 2.4em 2.4em; -} - -.headerMobileMenu>div.menuContent>ul { - margin-left: 0; - padding-left: 0; -} - -.headerMobileMenu>div.menuContent>ul li { - border-bottom: 1px solid #D3D3D3; - list-style: none; - padding: 1.2em 0 0.3em 0; -} - -.headerMobileMenu>div.menuContent>ul li a { - text-decoration: none !important; -} - -.headerMobileMenu>div.menuContent>ul>li>ul.subMenu { - display: none; - padding: 0.6em 0 0.6em 2.4em; -} - -.headerMobileMenu>div.menuContent>ul>li>ul.subMenu>li { - border-bottom: 1px solid #F5F5F5; -} - -.headerMobileMenu>div.menuContent>ul>li>ul.subMenu>li:last-child { - border-bottom: none; -} - -.headerMobileMenu>div.menuContent>div.goBack { - margin-top: 2.4em; -} - -.headerMobileMenu>div.menuContent>div.goBack>a { - text-decoration: none; -} - -.headerMobileMenu>div.menuContent>div.goBack>a>img { - height: 1.2em; - margin-right: 0.6em; -} - -.headerMobileMenu img.languageFlag { - height: 1.6em; - margin-right: 1.0em; - margin-bottom: 0.2em; - vertical-align: middle; -} - - -/* END MOBILE MENU */ - - -/* END MOBILE */ - - -/* GOOGLE MAPS */ - -div.googleMap { - height: 100%; - width: 100%; - border: 0; - filter: url("data:image/svg+xml;utf8,#grayscale"); - /* Firefox 10+ */ - filter: gray; - /* IE6-9 */ - -webkit-filter: grayscale(99%); - /* Chrome 19+ & Safari 6+ */ - -webkit-backface-visibility: hidden; - /* Fix for transition flickering */ -} - - -/* MEDIA QUERIES */ - -@media only screen and (max-width: 1700px) { - /*.banner { - padding-top: 36%; - }*/ -} - -@media only screen and (max-width: 1600px) { - .pageWidth { - padding-left: 2.5em; - padding-right: 2.5em; - } - table.mainMenu>tbody>tr>td>.dropDownRight { - margin-left: -4em; - } - .banner {} - .footer>.row1 .aaaWrapper>img.aaa { - width: 6em; - } - #forms>#formSupportContainer { - width: 50%; - padding: 2.5em 4em; - background: white; - } - #forms>#formContactContainer { - width: 60%; - } - #forms>#formContactContainer>table.contactTable>tbody>tr>td.contactColumn { - padding: 0 4em; - } - .pageBoxes { - width: 70%; - } - .pageBoxes .box { - height: 20em; - } - .mainMenu .h2:hover .dropDown { - display: block; - } -} - -@media only screen and (max-width: 1500px) { - table.mainMenu { - width: 80%; - } - table.mainMenu>tbody>tr>td>.dropDownRight { - margin-left: -3.5em; - } - .header>.content>.bottom>table>tbody>tr>td.logoCell>.logo { - margin-top: 1em; - height: 2.25em; - } - .header.mini>.content>.bottom>table>tbody>tr>td.logoCell>.logo { - margin-top: 0em; - height: 2em; - } - .banner {} - .pageBoxes { - width: 75%; - } -} - - -/* SMALL LAPTOPS */ - -@media only screen and (max-width: 1400px) { - table.mainMenu { - width: 90%; - } - table.mainMenu>tbody>tr>td>.dropDownRight { - margin-left: -4em; - } - .pageBoxes { - width: 80%; - } - .pageBoxes .box { - height: 20em; - } -} - - -/* SMALL LAPTOPS */ - -@media only screen and (max-width: 1200px) { - .footer>.row1 table.footerTable { - padding-left: 6em; - } - .footer>.row1 .aaaWrapper>img.aaa { - width: 5em; - } - table.mainMenu { - width: 100%; - } - table.mainMenu>tbody>tr>td>.dropDownRight { - margin-left: -4.5em; - } - .pageWidth { - padding-left: 2em; - padding-right: 2em; - } - #forms>#formSupportContainer { - width: 60%; - padding: 2.5em 4em; - } - #forms>#formContactContainer { - width: 80%; - } - #forms>#formContactContainer>table.contactTable>tbody>tr>td.contactColumn { - padding: 0 3em; - } - .banner .carousel>.infoBoxes>.infoBox>div.infoBoxContent>.infoBoxHead>.infoBoxTitle, - .contentPage .bannerBox .bannerBoxTitle { - font-size: 2.5em; - } - .banner .carousel>.infoBoxes>.fromLeft>div.infoBoxContent { - padding-left: 20%; - } - .pageBoxes { - width: 85%; - } - .pageBoxes .box { - height: 16em; - } -} - -@media only screen and (max-width: 1080px) { - table.mainMenu>tbody>tr>td>.dropDownRight { - margin-left: -3.5em; - } - .mainMenu .h2 { - font-size: 1.0em; - } -} - -@media only screen and (max-width: 992px) { - .footer>.row1 table.footerTable { - padding-left: 4em; - } - td.mainMenuCell { - padding-left: 4em; - } - table.mainMenu>tbody>tr>td>.dropDownRight { - margin-left: -4.5em; - } - /* .smallDesktop { - display: none; - }*/ - h2, - .h2 { - font-size: 1.2em; - } - .bread { - font-size: 1.0em; - line-height: 120%; - } - .pageWidth { - padding-left: 1em; - padding-right: 1em; - } - .header>.content>.bottom>table>tbody>tr>td.logoCell>.logo { - margin-top: 1em; - height: 1.75em; - } - .header.mini>.content>.bottom>table>tbody>tr>td.logoCell>.logo { - margin-top: 0em; - height: 1.75em; - } - /* .header > .content > .bottom > table > tbody > tr > td.logoCell > a { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - }*/ - #forms>#formSupportContainer { - width: 70%; - padding: 2.5em 4em; - } - #forms>#formContactContainer { - width: 80%; - } - #forms>.formContainer form input[type="submit"] { - display: block; - width: 100%; - position: relative; - padding: 1em 0; - margin-top: 1em; - margin-bottom: 2em; - } - #forms #formSupport { - padding-bottom: 2.5em; - } - .banner .carousel>.infoBoxes>.infoBox>div.infoBoxContent>.infoBoxHead>.infoBoxTitle, - .contentPage .bannerBox .bannerBoxTitle { - font-size: 2em; - } - .banner .carousel>.infoBoxes>.fromLeft>div.infoBoxContent>div.bread { - margin-right: 10%; - } - .banner .carousel>.controls>.directionControls>.directionControl.previous { - left: -.5em; - } - .banner .carousel>.controls>.directionControls>.directionControl.next { - right: -.5em; - } - .banner .carousel>.controls>.directionControls>.directionControl>img { - height: 2.5em; - padding: 0.85em 1.5em; - } - .pageBoxes { - width: 90%; - } -} - - -/* LARGE TABLETS */ - -@media only screen and (max-width: 768px) { - .desktop { - display: none; - } - .mobile { - display: block; - } - #mobile_indicator { - display: inline-block; - } - .pageWidth { - padding-left: 1.5em; - padding-right: 1.5em; - } - .header>.content>.top { - height: 2em; - } - .header>.content>.top>.content>table>tbody>tr>td.contact { - text-align: center; - } - .inlineTextPhoneIcon { - height: 1em; - } - .headerPhoneNumber { - font-size: 0.9em; - margin-right: 1em; - } - .headerEmail { - font-size: 1.0em; - } - .header>.content>.bottom { - height: 3em; - margin-top: 0.5em; - } - .header>.content>.bottom>table>tbody>tr>td.logoCell { - width: 10em; - vertical-align: middle; - } - .header>.content>.bottom>table>tbody>tr>td.logoCell>.logo { - margin-top: 0em; - margin-bottom: 0.5em; - width: 100%; - height: auto; - } - .header>.content>.bottom>table>tbody>tr>td.mobileIconsCell { - text-align: right; - /*background: pink;*/ - } - .header>.content>.bottom>table>tbody>tr>td.mobileIconsCell img { - position: relative; - height: 1.8em; - margin-right: 1.8em; - } - .header>.content>.bottom>table>tbody>tr>td.mobileIconsCell img:last-child { - margin-right: 0; - } - .header>.content>.bottom>table>tbody>tr>td.mobileIconsCell img#mobileLanguage { - height: 1.4em; - margin-top: 0; - margin-bottom: 0.2em; - } - .footer { - background: #22323b; - } - .footer>.row1 table.footerTable>tbody>tr>td { - margin-bottom: 2.0em; - padding-left: 3em; - } - .footer>.row1 table.footerTable>tbody>tr>td.stackable { - display: block; - width: 100%; - } - .footer>.row1 table.footerTable>tbody>tr>td { - width: 50%; - } - .footer>.row1 table.footerTable td.quickLinksContainer { - width: 50%; - } - .footer>.row2 { - text-align: center; - padding-top: 1em; - padding-bottom: 0; - background-color: #22323b; - } - #forms>#formSupportContainer { - width: 80%; - padding: 2.5em 4em; - } - #forms>#formContactContainer { - width: 95%; - padding: 3em 0; - } - #forms>.formContainer>span.btnQuitForm { - position: absolute; - font-size: 1.5em; - line-height: 1.5em; - top: 0.5em; - right: 0.8em; - cursor: pointer; - } - .banner { - margin-top: 5.6em; - margin-bottom: 3em; - } - .banner .carousel>.infoBoxes>.infoBox>div.infoBoxContent>.infoBoxHead>.infoBoxTitle, - .contentPage .bannerBox .bannerBoxTitle { - font-size: 1.5em; - } - .banner .carousel>.infoBoxes>.infoBox>div.infoBoxContent>.infoBoxHead>.triangleRight, - #mobileInfoBoxes .triangleRight, - .contentPage .bannerBox .triangleRight { - border-top: 0.6em solid transparent; - border-bottom: 0.6em solid transparent; - border-left: 0.6em solid #2aa2d4; - margin-right: 0.6em; - } - .banner .carousel>.infoBoxes>.fromLeft>div.infoBoxContent>div.bread { - margin-right: 5%; - } - .banner .carousel>.infoBoxes>.infoBox>div.infoBoxContent>.seeMoreContainer { - margin-top: 3em; - } - .banner .carousel>.infoBoxes>.infoBox>div.infoBoxContent>.seeMoreContainer>.linkSeeMore { - padding: 0.6em 1.2em; - } - .scrollToContentWrapper { - display: none; - } - .banner .carousel>.controls>.dotControls { - display: none; - } - .pageBoxes { - justify-content: center; - } - .pageBoxes .box { - width: 42%; - height: 16em; - margin-left: 3%; - margin-right: 3%; - margin-bottom: 2em; - } - .banner .carousel>.controls>.directionControls>.directionControl>img { - height: 2.125em; - padding: 0.85em 1.5em; - } -} - - -/* SMALL TABLETS */ - -@media only screen and (max-width: 620px) { - .headerMobileMenu>div.menuDummy { - width: 0; - } - .headerMobileMenu>div.menuContent { - width: 100%; - } - .footer>.row1 table.footerTable>tbody>tr>td { - padding-left: 1em; - } - #forms>#formSupportContainer, - #forms>#formContactContainer { - width: 95%; - padding: 2.5em 2em; - } - #forms>#formContactContainer>table.contactTable>tbody>tr>td.contactColumn { - width: 100%; - overflow: hidden; - display: block; - position: relative; - padding: 0 1em 6em 1em; - } - #forms>#formContactContainer>table.contactTable>tbody>tr>td.contactColumn:first-child { - border-right: none; - } - .banner .carousel>.infoBoxes>.infoBox>div.infoBoxContent>.infoBoxHead>.infoBoxTitle, - #mobileInfoBoxes .infoBoxTitle, - .contentPage .bannerBox .bannerBoxTitle { - font-size: 1.25em; - } - .banner .carousel>.infoBoxes>.infoBox>div.infoBoxContent>.infoBoxHead>.triangleRight, - #mobileInfoBoxes .triangleRight, - .contentPage .bannerBox .triangleRight { - border-top: 0.6em solid transparent; - border-bottom: 0.6em solid transparent; - border-left: 0.6em solid #2aa2d4; - margin-right: 0.6em; - } - .pageBoxes { - width: 90%; - } - .pageBoxes .box { - width: 45%; - height: 16em; - margin-left: 2%; - margin-right: 2%; - margin-bottom: 2em; - } -} - -@media only screen and (max-width: 480px) { - .pageWidth { - padding-left: 0.5em; - padding-right: 0.5em; - } - #phone_indicator { - display: inline-block; - } - .header>.content>.top { - height: 1.8em; - display: none; - } - .header>.content>.top>.content>table>tbody>tr>td.contact { - font-size: 1.0em; - } - .inlineTextIcon { - height: 0.7em; - top: 0.1em; - margin-right: 0.2em; - margin-left: 0.1em; - } - .inlineTextPhoneIcon { - height: 0.825em; - } - .headerPhoneNumber { - margin-right: 0.2em; - font-size: 0.9em; - } - .headerPhoneNumber a { - color: #2aa2d4 !important; - } - .headerEmail { - font-size: 1em; - } - .header>.content>.bottom { - height: 4em; - margin-top: 0; - padding-left: 1em; - padding-right: 1em; - } - /* .header > .content > .bottom > table > tbody > tr > td.logoCell { - width:8em; - vertical-align: middle; - }*/ - .header>.content>.bottom>table>tbody>tr>td.logoCell>.logo { - margin-bottom: 0; - width: 75%; - height: auto; - } - .header>.content>.bottom>table>tbody>tr>td.mobileIconsCell img { - position: relative; - height: 1.6em; - margin-right: 1em; - } - .header>.content>.bottom>table>tbody>tr>td.mobileIconsCell img#mobileLanguage { - height: 1.3em; - margin-top: 0; - margin-bottom: 0.15em; - } - .header>.content>.bottom>table>tbody>tr>td.mobileIconsCell img:last-child { - margin-top: 0.6em; - margin-right: 0; - } - .footer>.row1 table.footerTable>tbody>tr>td { - display: block; - width: 100%; - margin-bottom: 2.0em; - padding-left: 3em; - } - .footer>.row1 table.footerTable td.quickLinksContainer { - width: 100%; - } - .banner { - margin-top: 3.6em; - margin-bottom: 1em; - } - .banner .carousel>.infoBoxes { - display: none; - } - .banner .carousel>.controls>.directionControls>.directionControl { - display: none; - } - #mobileInfoBoxes { - height: 7em; - padding-top: 1.2em; - display: block; - } - #mobileInfoBoxes .seeMoreContainer { - display: none; - } - .pageBoxes { - width: 90%; - } - .pageBoxes .box { - width: 100%; - margin-left: 0; - margin-right: 0; - } -} - -@media only screen and (max-width: 420px) { - .footer>.row1 table.footerTable { - padding-left: 10%; - } -} - -@media only screen and (max-width: 380px) { - .footer>.row1 table.footerTable { - padding-left: 0; - } - #mobileInfoBoxes { - height: 7.5em; - display: block; - } - #forms>#formSupportContainer, - #forms>#formContactContainer { - width: 95%; - padding: 2.5em 1.5em; - } -} - -@media only screen and (max-width: 340px) { - .footer>.row1 table.footerTable { - padding-left: 0; - } -} - - -/* 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, #2980b9); - 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; -} \ No newline at end of file diff --git a/src/components/ResponsiveLayout.vue b/src/components/ResponsiveLayout.vue new file mode 100644 index 0000000..7cfa71f --- /dev/null +++ b/src/components/ResponsiveLayout.vue @@ -0,0 +1,654 @@ + + + + + diff --git a/src/components/ihead.vue b/src/components/ihead.vue index 98ce834..f4b9841 100644 --- a/src/components/ihead.vue +++ b/src/components/ihead.vue @@ -255,7 +255,7 @@ export default { .logoCell { flex-shrink: 0; - margin-right: 40px; + margin: 0px 40px; } .logoCell .logo { diff --git a/src/main.js b/src/main.js index 007c551..05933c6 100644 --- a/src/main.js +++ b/src/main.js @@ -1,6 +1,7 @@ import './assets/css/cookieconsent.min.css' import './assets/css/common.css' -import 'swiper/swiper.min.css' +import './assets/css/animations.css' +import 'swiper/css/swiper.min.css' import 'es6-promise/auto' import Vue from 'vue' import App from './App.vue' diff --git a/src/static/responsive_helper.js b/src/static/responsive_helper.js new file mode 100644 index 0000000..5822786 --- /dev/null +++ b/src/static/responsive_helper.js @@ -0,0 +1,353 @@ +/** + * 响应式助手 - 替代媒体查询的JavaScript解决方案 + * 动态检测屏幕尺寸并添加相应的响应式类名 + */ + +class ResponsiveHelper { + constructor() { + // 响应式断点定义 + this.breakpoints = { + xs: 380, + sm: 480, + md: 620, + lg: 768, + xl: 992, + xxl: 1200, + xxxl: 1500, + xxxxl: 1600 + }; + + // 当前屏幕尺寸 + this.currentSize = ''; + + // 初始化 + this.init(); + } + + /** + * 初始化响应式助手 + */ + init() { + // 添加容器查询支持检测 + this.addContainerQuerySupport(); + + // 检测初始屏幕尺寸 + this.detectScreenSize(); + + // 监听窗口大小变化 + this.addResizeListener(); + + // 监听方向变化 + this.addOrientationListener(); + + // 添加触摸设备检测 + this.detectTouchDevice(); + + // 添加高分辨率屏幕检测 + this.detectHighDPI(); + } + + /** + * 检测当前屏幕尺寸并添加相应类名 + */ + detectScreenSize() { + const width = window.innerWidth; + let newSize = ''; + + // 根据宽度确定屏幕尺寸 + if (width <= this.breakpoints.xs) { + newSize = 'xs'; + } else if (width <= this.breakpoints.sm) { + newSize = 'sm'; + } else if (width <= this.breakpoints.md) { + newSize = 'md'; + } else if (width <= this.breakpoints.lg) { + newSize = 'lg'; + } else if (width <= this.breakpoints.xl) { + newSize = 'xl'; + } else if (width <= this.breakpoints.xxl) { + newSize = 'xxl'; + } else if (width <= this.breakpoints.xxxl) { + newSize = 'xxxl'; + } else { + newSize = 'xxxxl'; + } + + // 如果尺寸发生变化，更新类名 + if (newSize !== this.currentSize) { + this.updateScreenClasses(newSize); + this.currentSize = newSize; + } + } + + /** + * 更新屏幕尺寸相关的CSS类名 + */ + updateScreenClasses(newSize) { + const body = document.body; + const html = document.documentElement; + + // 移除旧的屏幕尺寸类名 + const oldClasses = Object.values(this.breakpoints).map(size => `screen-${size}`); + body.classList.remove(...oldClasses); + html.classList.remove(...oldClasses); + + // 添加新的屏幕尺寸类名 + body.classList.add(`screen-${newSize}`); + html.classList.add(`screen-${newSize}`); + + // 添加响应式容器类名 + this.addResponsiveContainerClasses(); + + // 触发自定义事件 + this.triggerScreenChangeEvent(newSize); + } + + /** + * 添加响应式容器类名 + */ + addResponsiveContainerClasses() { + const containers = document.querySelectorAll('.responsive-container'); + + containers.forEach(container => { + const width = container.offsetWidth; + let containerSize = ''; + + // 根据容器宽度确定尺寸 + if (width <= this.breakpoints.xs) { + containerSize = 'xs'; + } else if (width <= this.breakpoints.sm) { + containerSize = 'sm'; + } else if (width <= this.breakpoints.md) { + containerSize = 'md'; + } else if (width <= this.breakpoints.lg) { + containerSize = 'lg'; + } else if (width <= this.breakpoints.xl) { + containerSize = 'xl'; + } else if (width <= this.breakpoints.xxl) { + containerSize = 'xxl'; + } else if (width <= this.breakpoints.xxxl) { + containerSize = 'xxxl'; + } else { + containerSize = 'xxxxl'; + } + + // 移除旧的容器尺寸类名 + const oldContainerClasses = Object.values(this.breakpoints).map(size => `container-${size}`); + container.classList.remove(...oldContainerClasses); + + // 添加新的容器尺寸类名 + container.classList.add(`container-${containerSize}`); + }); + } + + /** + * 添加容器查询支持 + */ + addContainerQuerySupport() { + // 检测浏览器是否支持容器查询 + if (CSS.supports('container-type', 'inline-size')) { + document.documentElement.classList.add('supports-container-queries'); + } else { + document.documentElement.classList.add('no-container-queries'); + // 为不支持容器查询的浏览器提供回退方案 + this.addContainerQueryPolyfill(); + } + } + + /** + * 容器查询回退方案 + */ + addContainerQueryPolyfill() { + // 创建 ResizeObserver 来监听容器大小变化 + if (window.ResizeObserver) { + const containers = document.querySelectorAll('.responsive-container'); + + containers.forEach(container => { + const resizeObserver = new ResizeObserver(() => { + this.addResponsiveContainerClasses(); + }); + + resizeObserver.observe(container); + }); + } + } + + /** + * 添加窗口大小变化监听器 + */ + addResizeListener() { + let resizeTimeout; + + window.addEventListener('resize', () => { + // 使用防抖优化性能 + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(() => { + this.detectScreenSize(); + }, 100); + }); + } + + /** + * 添加方向变化监听器 + */ + addOrientationListener() { + window.addEventListener('orientationchange', () => { + // 方向变化后延迟检测，确保布局已更新 + setTimeout(() => { + this.detectScreenSize(); + }, 100); + }); + } + + /** + * 检测触摸设备 + */ + detectTouchDevice() { + if ('ontouchstart' in window || navigator.maxTouchPoints > 0) { + document.documentElement.classList.add('touch-device'); + } else { + document.documentElement.classList.add('no-touch-device'); + } + } + + /** + * 检测高分辨率屏幕 + */ + detectHighDPI() { + const dpr = window.devicePixelRatio || 1; + + if (dpr >= 2) { + document.documentElement.classList.add('high-dpi'); + } else { + document.documentElement.classList.add('low-dpi'); + } + } + + /** + * 触发屏幕变化事件 + */ + triggerScreenChangeEvent(newSize) { + const event = new CustomEvent('screenSizeChange', { + detail: { + size: newSize, + width: window.innerWidth, + height: window.innerHeight, + breakpoint: this.breakpoints[newSize] + } + }); + + window.dispatchEvent(event); + } + + /** + * 获取当前屏幕尺寸信息 + */ + getCurrentScreenInfo() { + return { + size: this.currentSize, + width: window.innerWidth, + height: window.innerHeight, + breakpoint: this.breakpoints[this.currentSize], + isMobile: this.currentSize === 'xs' || this.currentSize === 'sm' || this.currentSize === 'md', + isTablet: this.currentSize === 'lg', + isDesktop: this.currentSize === 'xl' || this.currentSize === 'xxl' || this.currentSize === 'xxxl' || this.currentSize === 'xxxxl' + }; + } + + /** + * 检查是否匹配特定断点 + */ + matchesBreakpoint(breakpoint) { + const width = window.innerWidth; + return width <= this.breakpoints[breakpoint]; + } + + /** + * 添加响应式工具方法 + */ + addResponsiveUtils() { + // 添加响应式显示/隐藏方法 + window.responsiveShow = (element, breakpoint = 'lg') => { + if (this.matchesBreakpoint(breakpoint)) { + element.style.display = 'block'; + } else { + element.style.display = 'none'; + } + }; + + window.responsiveHide = (element, breakpoint = 'lg') => { + if (this.matchesBreakpoint(breakpoint)) { + element.style.display = 'none'; + } else { + element.style.display = 'block'; + } + }; + + // 添加响应式类名切换方法 + window.responsiveToggleClass = (element, className, breakpoint = 'lg') => { + if (this.matchesBreakpoint(breakpoint)) { + element.classList.add(className); + } else { + element.classList.remove(className); + } + }; + } + + /** + * 销毁响应式助手 + */ + destroy() { + // 移除事件监听器 + window.removeEventListener('resize', this.detectScreenSize); + window.removeEventListener('orientationchange', this.detectScreenSize); + + // 移除类名 + const body = document.body; + const html = document.documentElement; + const oldClasses = Object.values(this.breakpoints).map(size => `screen-${size}`); + body.classList.remove(...oldClasses); + html.classList.remove(...oldClasses); + } +} + +// 创建全局实例 +window.responsiveHelper = new ResponsiveHelper(); + +// 添加响应式工具方法 +window.responsiveHelper.addResponsiveUtils(); + +// 导出类（如果使用模块系统） +if (typeof module !== 'undefined' && module.exports) { + module.exports = ResponsiveHelper; +} + +// 使用示例： +/* +// 监听屏幕尺寸变化 +window.addEventListener('screenSizeChange', (event) => { + console.log('屏幕尺寸变化:', event.detail); + + // 根据屏幕尺寸执行不同逻辑 + if (event.detail.size === 'xs' || event.detail.size === 'sm') { + // 移动端逻辑 + console.log('移动端设备'); + } else if (event.detail.size === 'lg') { + // 平板逻辑 + console.log('平板设备'); + } else { + // 桌面端逻辑 + console.log('桌面端设备'); + } +}); + +// 检查当前屏幕信息 +const screenInfo = window.responsiveHelper.getCurrentScreenInfo(); +console.log('当前屏幕信息:', screenInfo); + +// 使用响应式工具方法 +const element = document.querySelector('.my-element'); +window.responsiveShow(element, 'md'); // 在中等屏幕以下显示 +window.responsiveHide(element, 'lg'); // 在大屏幕以上隐藏 +window.responsiveToggleClass(element, 'mobile-style', 'md'); // 在中等屏幕以下添加移动端样式 +*/ diff --git a/src/views/ResponsiveExample.vue b/src/views/ResponsiveExample.vue new file mode 100644 index 0000000..a775d03 --- /dev/null +++ b/src/views/ResponsiveExample.vue @@ -0,0 +1,814 @@ + + + + + diff --git a/src/views/index.vue b/src/views/index.vue index 4760a8e..99bf828 100644 --- a/src/views/index.vue +++ b/src/views/index.vue @@ -10,16 +10,16 @@ -
-
-
+
+
+
@@ -27,8 +27,8 @@
-

技术驱动未来，服务创造价值

-

上海丙维数字科技有限公司成立于2018年，专注于AI交付内容，为客户提供高质量的数字化解决方案

+

技术驱动未来，服务创造价值

+

上海丙维数字科技有限公司成立于2018年，专注于AI交付内容，为客户提供高质量的数字化解决方案

@@ -158,6 +158,9 @@