第十五届蓝桥杯（Web 应用开发）模拟赛 3 期-大学组

1.创意广告牌

.billboard {  position: relative;  background-color: #8e6534;  color: #fff;  padding: 20px;  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);  background-size: cover;  /* TODO：待补充代码  设置圆角 10px，背景图片为woodiness.jpg  */  background-image: url(../images/woodiness.jpg);  border-radius: 10px;}.top-sign {  position: relative;  width: 200px;  height: 100px;  background-color: #a87f4a;  display: flex;  justify-content: center;  align-items: center;  font-size: 1rem;  /* TODO：待补充代码   上面两个角是圆角 15px，下面两个角是直角  元素 x 轴倾斜 20度*/ border-radius: 15px 15px 0px 0px ; transform: skewX(-20deg);}

2原子化 CSS

/* TODO: 实现原子化 flex */p {  display: flex;  flex-direction: column;}

3神秘咒语 

4. 朋友圈

document.addEventListener("DOMContentLoaded", function() {  // TODO: 请在此补充页面加载时缓存检查的代码  const savedText = localStorage.getItem('savedText');    // if (savedText!=null&&savedText!=undefined) {    //   document.getElementById('text').value = savedText;    // }});// 当文本框输入内容改变时，动态地设置localStorage缓存，并根据有没有文本改变按钮状态// 此处使用了防抖函数，避免太过频繁地更新缓存document.getElementById("text").addEventListener(  "input",  debounce(function() {     // 提示正在保存中     document.getElementById("prompt").textContent = "正在保存中...";         // TODO: 请在此补充用户输入时设置缓存和调整按钮状态的代码    const text = this.value;    localStorage.setItem('savedText', text);    // TODO-END       // 过一段时间后提示保存完成，模拟上传数据至后台的效果    setTimeout(function() {      document.getElementById("prompt").textContent = "内容已保存";    }, 750);  }, 200));document.getElementById("post").addEventListener("click", function() {  const content = document.getElementById("text").value;  const element = createContent(content);  document.querySelector(".contents").appendChild(element);  document.getElementById("prompt").textContent = "";  // TODO: 请在此补充用户点击“发表”按钮时清空文本框和缓存的代码  // 清空输入框中的内容  document.getElementById('text').value = '';      // 移除 localStorage 内缓存的文本数据  localStorage.removeItem('savedText');  if(!document.getElementById("text").value){    // 禁用按钮    document.getElementById("post").disabled=true  }else{    document.getElementById("post").disabled=false  }});// 防抖工具函数/** * @param  {function} fn  - 回调函数 * @param  {string} delay - 函数执行延迟，单位为ms */function debounce(fn, delay) {  //return fn; // 这一行是为了确保页面正常运行，可以去掉  // TODO: 请实现函数防抖的功能  let timeoutId;  clearTimeout(timeoutId);  timeoutId=setTimeout(()=>{    fn.apply()  },delay)}// 用户点击“发表”后，创建一条新信息的DOM元素function createContent(content) {  const p = document.createElement("p");  const d = new Date();  const deleteBtn = document.createElement("button");  deleteBtn.textContent = "删除";  deleteBtn.addEventListener("click", function() {    p.remove();  });  p.innerHTML = `${content}${d.toLocaleString()}`;  p.appendChild(deleteBtn);  return p;}

5. 美食蛋白质揭秘 

            不同食���的蛋白质占比                      
不同食物的蛋白质占比
                                                鸡胸肉 30 {{datasource.name datasource.value}}                                               const { ref, onMounted } = Vue;        const  MockURL =  './mock/data.json'        const app = {            setup() {                let datasource                function echartsInit(data) {                    const main = document.getElementById("main");                    const myChart = echarts.init(main);                    myChart.setOption({                        legend: {                              data:data,                            orient: "vertical",                            top: "26%",                            right: "2%",                            icon: "circle",                            textStyle: {                                fontSize: 20,                                rich: {                                    one: {                                        width: 80,                                    },                                    two: {                                        width: 80,                                    },                                    three: {                                        width: 80,                                    },                                },                            },                            formatter: (name) => {                                var total = 0;                                var target;                                let formateData = data;                                for (var i = 0; i   
6. 营业状态切换
 
 function useToggle(state) {            // TODO:待补充代码            // const [state, setState] = useState(initialState);            // return true            const toggle = () => {            setState(!state);         };         // 返回状态和切换状态函数的数组           return [state, toggle];        }        const app = Vue.createApp({            setup() {                const [isWorking, toggleWorking] = useToggle(false) // 使用自定义的useToggle函数创建状态和切换函数                const workImage = './images/open.jpg' // 营业状态的图片路径                const restImage = './images/close.jpg' // 打烊状态的图片路径                return {                    isWorking,                    toggleWorking,                    workImage,                    restImage                }            }        });
 （）（）