企业官网建设流程全解析

最基本的网站设计,初学平面设计从哪学起,济南住建官网,简历模板免费下载可编辑1.自定义滑块 做法#xff1a;1.先定义好动画#xff0c;暂停2.使用动画的delay时间#xff0c;来确定各个时间点位置3.通过input:range来改变delay的css变量值#xff0c;使用dom.style.setProperty(--delayTime,25s)来设置 template!--智能环绕参数面板-- 1.先定义好动画暂停 2.使用动画的delay时间来确定各个时间点位置 3.通过input:range来改变delay的css变量值使用dom.style.setProperty(--delayTime,25s)来设置template !--智能环绕参数面板-- pop-dialog width368px left50% top35% title智能环绕设置 closeonClose div classcontent div classexplanation-box 说明可通过键盘微调飞行位置调整环绕高度或半径请检查周边环境后再执行环绕操作。 /div div classparams-box div classparams-box-item div classparams-box-item-title环绕高度/div div classparams-box-item-content div classparams-btn clickhandleSurround(-100)-100/div div classparams-btn clickhandleSurround(-10)-10/div div classparams-btn clickhandleSurround(-1)-1/div a-input placeholder请输入 addon-afterm v-model:valueformData.surroundHeight / div classparams-btn add clickhandleSurround(1)1/div div classparams-btn add clickhandleSurround(10)10/div div classparams-btn add clickhandleSurround(100)100/div /div /div div classparams-box-item div classparams-box-item-title环绕距离/div div classparams-box-item-content div classparams-btn clickhandleSurRadius(-100)-100/div div classparams-btn clickhandleSurRadius(-10)-10/div div classparams-btn clickhandleSurRadius(-1)-1/div a-input placeholder请输入 addon-afterm v-model:valueformData.surroundRadius / div classparams-btn add clickhandleSurRadius(1)1/div div classparams-btn add clickhandleSurRadius(10)10/div div classparams-btn add clickhandleSurRadius(100)100/div /div /div div classparams-box-item div classparams-box-item-title环绕速度/div div classparams-box-item-content column div classslider-box refsliderBoxRef input typerange name id classslider-input :min0 :max50 refsliderInputRef v-modelsliderValue div classslider-inner img refsliderArrowRef classslider-arrow :srcsliderArrow alt / /div /div div classslider-display div classslider-display-name {{ isClockwise ? 顺时钟 : 逆时针 }} /div div classslider-display-name span classblue{{ formData.surroundSpeed }}/span m/s /div div classslider-display-name25m/s/div /div /div /div /div /div template #footer a-button classborder-radius4 clickonCancel取消/a-button a-button classborder-radius4 typeprimary clickonConfirm 确定/a-button /template /pop-dialog /template script setup langts import { computed, onMounted, reactive, ref, nextTick } from vue import popDialog from /components/pop-dialog.vue import { message } from ant-design-vue import sliderArrow from /components/cockpit/img/slider-arrow.png const $emit defineEmits([close, confirm]) //顺时针 const isClockwise ref(true) const formData ref({ surroundHeight: 3, surroundRadius: 3, surroundSpeed: 3, }) //输入框速度 const sliderValue ref(25) const handleSurround (value: any) { formData.value.surroundHeight Number(formData.value.surroundHeight) value } const handleSurRadius (value: any) { formData.value.surroundRadius Number(formData.value.surroundRadius) value } const sliderInputRef ref() const sliderBoxRef ref() onMounted(() { if (isClockwise.value) {//顺时针 sliderValue.value 25 - formData.value.surroundSpeed } else { sliderValue.value formData.value.surroundSpeed 25 } sliderInputRef.value.addEventListener(input, (e: any) { if (e.target.value 25) { isClockwise.value false formData.value.surroundSpeed e.target.value - 25 } else { isClockwise.value true formData.value.surroundSpeed25 - e.target.value } const time -50 e.target.value; console.log(${time}s ); sliderBoxRef.value.style.setProperty(--delayTime,${time}s ) }) }) const onCancel () { $emit(close) } const onConfirm () { $emit(confirm) } //指点模式选择 const handleModelClick (item: any) {} const onClose () { $emit(close) } /script style langscss scoped keyframes sliderInner { 0% { width: 45%; right: 50%; left: auto; //靠右居中 transform: translate(0%, -50%); } 50% { width: 0%; right: 50%; left: auto; transform: translate(0%, -50%); } 50.01% { width: 0%; right: auto; left: 50%; transform: translate(0%, -50%); } 100% { width: 45%; right: auto; left: 50%; transform: translate(0%, -50%); } } keyframes sliderArrow { 0% { right: auto; left: 0; transform: translate(-50%, -50%); } 50% { right: auto; left: 0; transform: translate(-50%, -50%); } 50.01% { right: 0; left: auto; transform: translate(50%, -50%); } 100% { right: 0; left: auto; transform: translate(50%, -50%); } } $totalTime:50s; .popup { .popup-content { padding: 12px; } } .content { width: 100%; display: flex; flex-direction: column; gap: 8px; .explanation-box { width: 100%; /* 自动布局 */ display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 8px; gap: 16px; background: rgba(255, 170, 0, 0.2); color: #ffaa00; } .params-box { display: flex; flex-direction: column; gap: 8px; .params-box-item { height: 90px; padding: 0px 12px; background: rgba(13, 21, 29, 0.6); display: flex; flex-direction: column; justify-content: center; gap: 8px; .params-box-item-title { } .params-box-item-content { display: flex; gap: 4px; .params-btn { cursor: pointer; user-select: none; width: auto; min-width: 30px; height: 30px; padding: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); // 添加以下属性确保flex行为正确 flex: 0 0 auto; // 不伸缩根据内容自适应 box-sizing: border-box; // 确保padding不影响实际宽度计算 color: #a2a7b4; .add { color: #fff; } :hover { background: rgba(255, 255, 255, 0.24); } } .column { flex-direction: column; } .slider-box { --delayTime: -50s; position: relative; width: 324px; height: 24px; background: url(/components/cockpit/img/slider-bar.png) no-repeat center; background-size: 100% 100%; ::after { content: ; z-index: 2; display: block; width: 10px; height: 20px; border-radius: 2px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; } .slider-input{ opacity: 0; width: 90%; position: absolute; top: 50%; transform: translate(5%,-50%); z-index: 9; } .slider-inner { z-index: 1; position: absolute; width: 0%; height: 12px; top: 50%; left: 50%; // transform: translate(-100%, -50%); background-color: #1a71ff; animation: sliderInner $totalTime linear var(--delayTime,-25s) infinite; animation-play-state: paused; .slider-arrow { z-index: 9; // cursor: pointer; // pointer-events: all; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); animation: sliderArrow $totalTime linear var(--delayTime,-25s) infinite; animation-play-state: paused; } } } .slider-display { display: flex; justify-content: space-between; font-size: 14px; color: #fff; .slider-display-name { .blue { color: #1a71ff; font-size: 14px; font-weight: 600; } } } } } } } /style