万朱浩 / Venue-Ops

Go to a project
Toggle navigation Toggle navigation pinning
马一丁
24f04012 1 parent 19bef8d3

Add Comments

Inline Side-by-side
Showing 1 changed file with 125 additions and 1 deletions
@@ -3946,8 +3946,132 @@ document.documentElement.classList.add('js-ready'); @@ -3946,8 +3946,132 @@ document.documentElement.classList.add('js-ready');
3946 const shadow = this.attachShadow({ mode: "closed" }); 3946 const shadow = this.attachShadow({ mode: "closed" });
3947 const container = document.createElement("div"); 3947 const container = document.createElement("div");
3948 container.setAttribute("class", "container"); 3948 container.setAttribute("class", "container");
  3949 + // font-size 控制整个组件的缩放比例
  3950 + // size 参数默认为 3，此时 font-size = 1px，组件实际尺寸为 180px x 70px
  3951 + // size = 1.5 时，font-size = 0.5px，组件缩小到 90px x 35px
3949 container.setAttribute("style", `font-size: ${(size / 3).toFixed(2)}px`); 3952 container.setAttribute("style", `font-size: ${(size / 3).toFixed(2)}px`);
3950 - container.innerHTML = '<div class="components"><div class="main-button"><div class="moon"></div><div class="moon"></div><div class="moon"></div></div><div class="daytime-background"></div><div class="daytime-background"></div><div class="daytime-background"></div><div class="cloud"><div class="cloud-son"></div><div class="cloud-son"></div><div class="cloud-son"></div><div class="cloud-son"></div><div class="cloud-son"></div><div class="cloud-son"></div></div><div class="cloud-light"><div class="cloud-son"></div><div class="cloud-son"></div><div class="cloud-son"></div><div class="cloud-son"></div><div class="cloud-son"></div><div class="cloud-son"></div></div><div class="stars"><div class="star big"><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div></div><div class="star big"><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div></div><div class="star medium"><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div></div><div class="star medium"><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div></div><div class="star small"><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div></div><div class="star small"><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div><div class="star-son"></div></div></div></div>'; 3953 +
  3954 + /**
  3955 + * 日夜切换按钮的 DOM 结构
  3956 + *
  3957 + * 层级关系：
  3958 + * .components (胶囊形主容器)
  3959 + * ├── .main-button (可移动的太阳/月亮圆球)
  3960 + * │ ├── .moon (环形山1 - 右上小)
  3961 + * │ ├── .moon (环形山2 - 左侧大)
  3962 + * │ └── .moon (环形山3 - 右下小)
  3963 + * ├── .daytime-background (光晕层1 - 最亮)
  3964 + * ├── .daytime-background (光晕层2 - 中等)
  3965 + * ├── .daytime-background (光晕层3 - 最淡)
  3966 + * ├── .cloud (主云朵容器)
  3967 + * │ └── .cloud-son x 6 (6个白色圆形组成云朵)
  3968 + * ├── .cloud-light (浅色云朵容器，增加层次感)
  3969 + * │ └── .cloud-son x 6 (6个半透明圆形)
  3970 + * └── .stars (星星容器)
  3971 + * ├── .star.big x 2 (2颗大星星)
  3972 + * │ └── .star-son x 4 (4个角组成四角星)
  3973 + * ├── .star.medium x 2 (2颗中星星)
  3974 + * │ └── .star-son x 4
  3975 + * └── .star.small x 2 (2颗小星星)
  3976 + * └── .star-son x 4
  3977 + */
  3978 + container.innerHTML = [
  3979 + // ========== 主容器开始 ==========
  3980 + '<div class="components">',
  3981 +
  3982 + // ========== 太阳/月亮按钮 ==========
  3983 + // 白天显示为金黄色太阳，夜晚变为灰白色月亮
  3984 + // 通过 JS 控制 translateX 实现左右移动
  3985 + '<div class="main-button">',
  3986 + // 三个月亮环形山（白天时 opacity:0 隐藏，夜晚时显示）
  3987 + '<div class="moon"></div>', // 环形山1：右上角，小尺寸
  3988 + '<div class="moon"></div>', // 环形山2：左侧，大尺寸
  3989 + '<div class="moon"></div>', // 环形山3：右下角，小尺寸
  3990 + '</div>',
  3991 +
  3992 + // ========== 太阳光晕效果 ==========
  3993 + // 三层同心圆，透明度递减，模拟太阳的光晕扩散
  3994 + // 随太阳一起移动（通过 JS 控制 translateX）
  3995 + '<div class="daytime-background"></div>', // 光晕层1：110em，20%不透明度
  3996 + '<div class="daytime-background"></div>', // 光晕层2：135em，10%不透明度
  3997 + '<div class="daytime-background"></div>', // 光晕层3：160em，5%不透明度
  3998 +
  3999 + // ========== 主云朵层 ==========
  4000 + // 白天可见，夜晚通过 translateY(80em) 移出视野
  4001 + '<div class="cloud">',
  4002 + // 6个白色圆形，通过不同位置和大小组合成云朵形状
  4003 + // CSS 使用 nth-child(6n+x) 选择器为每个云朵设置不同位置
  4004 + '<div class="cloud-son"></div>', // 云朵1：right:-20em, bottom:10em, 50x50em
  4005 + '<div class="cloud-son"></div>', // 云朵2：right:-10em, bottom:-25em, 60x60em
  4006 + '<div class="cloud-son"></div>', // 云朵3：right:20em, bottom:-40em, 60x60em
  4007 + '<div class="cloud-son"></div>', // 云朵4：right:50em, bottom:-35em, 60x60em
  4008 + '<div class="cloud-son"></div>', // 云朵5：right:75em, bottom:-60em, 75x75em
  4009 + '<div class="cloud-son"></div>', // 云朵6：right:110em, bottom:-50em, 60x60em
  4010 + '</div>',
  4011 +
  4012 + // ========== 浅色云朵层 ==========
  4013 + // opacity:0.5 的半透明云朵，增加层次感和立体感
  4014 + '<div class="cloud-light">',
  4015 + '<div class="cloud-son"></div>',
  4016 + '<div class="cloud-son"></div>',
  4017 + '<div class="cloud-son"></div>',
  4018 + '<div class="cloud-son"></div>',
  4019 + '<div class="cloud-son"></div>',
  4020 + '<div class="cloud-son"></div>',
  4021 + '</div>',
  4022 +
  4023 + // ========== 星星容器 ==========
  4024 + // 白天通过 translateY(-125em) 隐藏在上方
  4025 + // 夜晚通过 translateY(-62.5em) 移入视野
  4026 + '<div class="stars">',
  4027 +
  4028 + // 大星星 x 2（--size: 7.5em）
  4029 + // 每颗星星由4个 .star-son 组成四角星形状
  4030 + '<div class="star big">', // 星星1：top:11em, left:39em, 动画周期3.5s
  4031 + '<div class="star-son"></div>', // 左上角
  4032 + '<div class="star-son"></div>', // 右上角
  4033 + '<div class="star-son"></div>', // 左下角
  4034 + '<div class="star-son"></div>', // 右下角
  4035 + '</div>',
  4036 + '<div class="star big">', // 星星2：top:39em, left:91em, 动画周期4.1s
  4037 + '<div class="star-son"></div>',
  4038 + '<div class="star-son"></div>',
  4039 + '<div class="star-son"></div>',
  4040 + '<div class="star-son"></div>',
  4041 + '</div>',
  4042 +
  4043 + // 中星星 x 2（--size: 5em）
  4044 + '<div class="star medium">', // 星星3：top:26em, left:19em, 动画周期4.9s
  4045 + '<div class="star-son"></div>',
  4046 + '<div class="star-son"></div>',
  4047 + '<div class="star-son"></div>',
  4048 + '<div class="star-son"></div>',
  4049 + '</div>',
  4050 + '<div class="star medium">', // 星星4：top:37em, left:66em, 动画周期5.3s
  4051 + '<div class="star-son"></div>',
  4052 + '<div class="star-son"></div>',
  4053 + '<div class="star-son"></div>',
  4054 + '<div class="star-son"></div>',
  4055 + '</div>',
  4056 +
  4057 + // 小星星 x 2（--size: 3em）
  4058 + '<div class="star small">', // 星星5：top:21em, left:75em, 动画周期3s
  4059 + '<div class="star-son"></div>',
  4060 + '<div class="star-son"></div>',
  4061 + '<div class="star-son"></div>',
  4062 + '<div class="star-son"></div>',
  4063 + '</div>',
  4064 + '<div class="star small">', // 星星6：top:51em, left:38em, 动画周期2.2s
  4065 + '<div class="star-son"></div>',
  4066 + '<div class="star-son"></div>',
  4067 + '<div class="star-son"></div>',
  4068 + '<div class="star-son"></div>',
  4069 + '</div>',
  4070 +
  4071 + '</div>', // .stars 结束
  4072 +
  4073 + '</div>' // .components 结束
  4074 + ].join('');
3951 const style = document.createElement("style"); 4075 const style = document.createElement("style");
3952 /** 4076 /**
3953 * 日夜切换按钮组件的完整 CSS 样式 4077 * 日夜切换按钮组件的完整 CSS 样式