Vue 动态换肤
效果如图：
设计思路：
规划几套样式，通过动态class 或 scss 混入 @include 等方式进行赋值，给最外层的父元素添加全局样式。涉及到跨页面操作，可以将class转化为JSON字符串存在storage 或vuex 里，或者封装进公用组件，把每个页面不同的内容以插槽的形式插入。源代码（vue 版）：
<template>
<div :class="[`son${temp}`]" class="demo3">
<div v-if="temp === 1" class="head jus">
<span>span>
<span>标题span>
<span>span>
div>
<div v-else-if="temp === 2" class="head jus">
<span>标题span>
<input type="text" placeholder="请输入关键字搜索" class="head-input">
div>
<div v-else-if="temp === 3" class="head jus">
<img src="https://img0.baidu.com/it/u=236085137,1979895699&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360" alt="" class="head-icon">
<span style="margin-left: 20px">昵称span>
<input type="text" placeholder="请输入关键字搜索" class="head-input">
div>
<div v-else-if="temp === 4" class="head jus">
<img src="https://img0.baidu.com/it/u=2776049540,4161189450&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500" alt="" class="head-icon">
<span style="margin: 0 20px">标题span>
<marquee style="flex: 1"> 君埋泉下泥销骨，我寄人间雪满头marquee >
<img src="https://img-blog.csdnimg.cn/7d53b4c7612b47dcbb604680dca1508e.png" alt="" class="head-icon">
div>
<div class="banner flex">
<img :src="list[temp - 1]" alt="">
div>
<div class="content">
<p>一花一世界p>
<p class="er">一叶一菩提p>
div>
<div class="footer">
<div v-for="(i,d) in 4" :key="d" @click="temp = i" :class="[`son${temp}`]" class="button">皮肤{{i}}div>
div>
div>
template>
<script>
export default {
data() {
return {
temp: 1, // 皮肤参数
list: [
'https://img0.baidu.com/it/u=3178510979,425083974&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400',
'https://img0.baidu.com/it/u=2937864225,3744149905&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400',
'https://img0.baidu.com/it/u=3254616311,515815880&fm=253&fmt=auto&app=138&f=JPEG?w=1371&h=500',
'https://img0.baidu.com/it/u=1513041657,3964511766&fm=253&fmt=auto&app=138&f=JPEG?w=1205&h=500'
]
}
}
}
script>
<style scoped>
.footer {
position: fixed;
left: 10vw;
bottom: 10vh;
display: flex;
}
.head-input {
flex: 1;
margin: 0 20px;
border-radius: 6px;
}
.head-icon {
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #fff;
}
.button {
width: 80px;
height: 40px;
margin-right: 20px;
border-radius: 6px;
}
.banner img{
width: 100%;
margin: 20px 0;
}
.son1 {
font-family: 华文彩云,仿宋;
font-size: 22px;
line-height: 2;
background-image: linear-gradient(35deg, #f99 50%, #99f 100%);
}
.son1 .er {
font-size: 18px;
font-style: italic;
}
.son2 {
font-family: 华文琥珀,方正舒体;
font-size: 26px;
line-height: 2;
background-image: linear-gradient(-60deg, rgb(168, 135, 135) 50%, rgb(122, 122, 156) 100%);
}
.son2 .er {
font-size: 20px;
font-style: italic;
}
.son3 {
font-family: 隶书;
font-size: 20px;
line-height: 2;
background-image: linear-gradient(135deg, rgb(181, 196, 132) 50%, rgb(78, 78, 173) 100%);
}
.son3 .er {
font-size: 16px;
font-style: italic;
}
.son4 {
font-family: 宋体;
font-size: 26px;
line-height: 2;
background-image: linear-gradient(60deg, rgb(214, 232, 157) 50%, rgb(149, 170, 134) 100%);
}
.son4 .er {
font-size: 20px;
font-style: italic;
}
.demo3 {
width: 600px;
height: 100vh;
padding: 20px;
}
.flex {
display: flex;
align-items: center;
}
.jus {
display: flex;
justify-content: space-between;
align-items: center;
}
/* input */
input{
width: 235px;
height: 32px;
padding-left:15px;
box-sizing: border-box;
border:none;
background: #f2f3f5;
outline: 1px solid transparent;
transition: all .2s;
}
input:hover{
background: #e5e6eb;
}
style>
源代码（html 版）：
<html>
<head>head>
<body>
<div id="app" :class="[`son${temp}`]" class="demo3">
<div v-if="temp === 1" class="head jus">
<span>span>
<span>标题span>
<span>span>
div>
<div v-else-if="temp === 2" class="head jus">
<span>标题span>
<input type="text" placeholder="请输入关键字搜索" class="head-input">
div>
<div v-else-if="temp === 3" class="head jus">
<img src="https://img0.baidu.com/it/u=236085137,1979895699&fm=253&fmt=auto&app=138&f=JPEG?w=360&h=360" alt="" class="head-icon">
<span style="margin-left: 20px">昵称span>
<input type="text" placeholder="请输入关键字搜索" class="head-input">
div>
<div v-else-if="temp === 4" class="head jus">
<img src="https://img0.baidu.com/it/u=2776049540,4161189450&fm=253&fmt=auto&app=138&f=JPEG?w=499&h=500" alt="" class="head-icon">
<span style="margin: 0 20px">标题span>
<marquee style="flex: 1"> 君埋泉下泥销骨，我寄人间雪满头marquee >
<img src="https://img-blog.csdnimg.cn/7d53b4c7612b47dcbb604680dca1508e.png" alt="" class="head-icon">
div>
<div class="banner flex">
<img :src="list[temp - 1]" alt="">
div>
<div class="content">
<p>一花一世界p>
<p class="er">一叶一菩提p>
div>
<div class="footer">
<div v-for="(i,d) in 4" :key="d" @click="temp = i" :class="[`son${temp}`]" class="button">皮肤{{i}}div>
div>
div>
body>
html>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
<script>
var app = new Vue({
el: '#app',
data: {
temp: 1, // 皮肤参数
list: [
'https://img0.baidu.com/it/u=3178510979,425083974&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400',
'https://img0.baidu.com/it/u=2937864225,3744149905&fm=253&fmt=auto&app=138&f=JPEG?w=1280&h=400',
'https://img0.baidu.com/it/u=3254616311,515815880&fm=253&fmt=auto&app=138&f=JPEG?w=1371&h=500',
'https://img0.baidu.com/it/u=1513041657,3964511766&fm=253&fmt=auto&app=138&f=JPEG?w=1205&h=500'
]
}
})
script>
<style>
.footer {
position: fixed;
left: 10vw;
bottom: 10vh;
display: flex;
}
.head-input {
flex: 1;
margin: 0 20px;
border-radius: 6px;
}
.head-icon {
width: 60px;
height: 60px;
border-radius: 50%;
border: 2px solid #fff;
}
.button {
width: 80px;
height: 40px;
margin-right: 20px;
border-radius: 6px;
}
.banner img{
width: 100%;
margin: 20px 0;
}
.son1 {
font-family: 华文彩云,仿宋;
font-size: 22px;
line-height: 2;
background-image: linear-gradient(35deg, #f99 50%, #99f 100%);
}
.son1 .er {
font-size: 18px;
font-style: italic;
}
.son2 {
font-family: 华文琥珀,方正舒体;
font-size: 26px;
line-height: 2;
background-image: linear-gradient(-60deg, rgb(168, 135, 135) 50%, rgb(122, 122, 156) 100%);
}
.son2 .er {
font-size: 20px;
font-style: italic;
}
.son3 {
font-family: 隶书;
font-size: 20px;
line-height: 2;
background-image: linear-gradient(135deg, rgb(181, 196, 132) 50%, rgb(78, 78, 173) 100%);
}
.son3 .er {
font-size: 16px;
font-style: italic;
}
.son4 {
font-family: 宋体;
font-size: 26px;
line-height: 2;
background-image: linear-gradient(60deg, rgb(214, 232, 157) 50%, rgb(149, 170, 134) 100%);
}
.son4 .er {
font-size: 20px;
font-style: italic;
}
.demo3 {
width: 600px;
height: 100vh;
padding: 20px;
}
.flex {
display: flex;
align-items: center;
}
.jus {
display: flex;
justify-content: space-between;
align-items: center;
}
/* input */
input{
width: 235px;
height: 32px;
padding-left:15px;
box-sizing: border-box;
border:none;
background: #f2f3f5;
outline: 1px solid transparent;
transition: all .2s;
}
input:hover{
background: #e5e6eb;
}
style>
相关图片如下：
到底了！原创不易，转载请注明出处。
前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获
推荐阅读：
在一个区间里求素数
小鲨鱼
Css手绘图形
Dom树 CSS树 渲染树
Git 基础命令与事件详解