123
main
nm 1 month ago
parent 0908c26935
commit 1c58b3c40a

14
.gitignore vendored

@ -0,0 +1,14 @@
# Windows
[Dd]esktop.ini
Thumbs.db
$RECYCLE.BIN/
# macOS
.DS_Store
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
# Node.js
node_modules/

@ -1,2 +0,0 @@
# order

@ -0,0 +1,31 @@
// app.js
App({})
wx.cloud.init({
env: 'software-9g3qgled9f6190ea' // 你的环境ID
})
App({
globalData: {
mynum: 0 ,
myname:'',
},
  onLaunch: function () {
    wx.cloud.init({
      env: 'software-9g3qgled9f6190ea', // 替换为你的云开发环境ID
      traceUser: false, // 是否在将用户访问记录到用户管理中在控制台中可见默认为false
    });
  },
onHide: function(){
const app = getApp();
let db = wx.cloud.database(); //设置数据库
let user = db.collection('user_ol');//单引号里为刚刚新建的集合名
user.where({
//先查询
num: app.globalData.mynum
}).remove().then(res => {
console.log('删除成功')
}).catch(err => {
console.log('删除失败',err)//失败提示错误信息
})
},
});

@ -0,0 +1,34 @@
{
"pages": [
"pages/index/index",
"pages/index5/index5",
"pages/index4/index4",
"pages/index2/index2",
"pages/rankk/rankk",
"pages/upload_stu/upload_stu",
"pages/change/change",
"pages/demo1/demo1",
"pages/index3/index3",
"pages/stu_client/stu_client",
"pages/comment/comment"
],
"window": {
"navigationBarTextStyle": "black",
"navigationStyle": "custom",
"navigationBarTitleText": "微信接口功能演示"
},
"style": "v2",
"renderer": "skyline",
"rendererOptions": {
"skyline": {
"defaultDisplayBlock": true,
"disableABTest": true,
"sdkVersionBegin": "3.0.0",
"sdkVersionEnd": "15.255.255"
}
},
"componentFramework": "glass-easel",
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}

@ -0,0 +1,11 @@
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
@import "./style/iconfont/iconfont.wxss"

@ -0,0 +1,105 @@
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties: {
extClass: {
type: String,
value: ''
},
title: {
type: String,
value: ''
},
background: {
type: String,
value: ''
},
color: {
type: String,
value: ''
},
back: {
type: Boolean,
value: true
},
loading: {
type: Boolean,
value: false
},
homeButton: {
type: Boolean,
value: false,
},
animated: {
// 显示隐藏的时候opacity动画效果
type: Boolean,
value: true
},
show: {
// 显示隐藏导航隐藏的时候navigation-bar的高度占位还在
type: Boolean,
value: true,
observer: '_showChange'
},
// back为true的时候返回的页面深度
delta: {
type: Number,
value: 1
},
},
/**
* 组件的初始数据
*/
data: {
displayStyle: ''
},
lifetimes: {
attached() {
const rect = wx.getMenuButtonBoundingClientRect()
wx.getSystemInfo({
success: (res) => {
const isAndroid = res.platform === 'android'
const isDevtools = res.platform === 'devtools'
this.setData({
ios: !isAndroid,
innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`,
leftWidth: `width: ${res.windowWidth - rect.left }px`,
safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px` : ``
})
}
})
},
},
/**
* 组件的方法列表
*/
methods: {
_showChange(show) {
const animated = this.data.animated
let displayStyle = ''
if (animated) {
displayStyle = `opacity: ${
show ? '1' : '0'
};transition:opacity 0.5s;`
} else {
displayStyle = `display: ${show ? '' : 'none'}`
}
this.setData({
displayStyle
})
},
back() {
const data = this.data
if (data.delta) {
wx.navigateBack({
delta: data.delta
})
}
this.triggerEvent('back', { delta: data.delta }, {})
}
},
})

@ -0,0 +1,5 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {}
}

@ -0,0 +1,64 @@
<view class="weui-navigation-bar {{extClass}}">
<view class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}" style="color: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}; {{safeAreaTop}};">
<!-- 左侧按钮 -->
<view class='weui-navigation-bar__left' style="{{leftWidth}};">
<block wx:if="{{back || homeButton}}">
<!-- 返回上一页 -->
<block wx:if="{{back}}">
<view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_goback">
<view
bindtap="back"
class="weui-navigation-bar__btn_goback_wrapper"
hover-class="weui-active"
hover-stay-time="100"
aria-role="button"
aria-label="返回"
>
<view class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
</view>
</view>
</block>
<!-- 返回首页 -->
<block wx:if="{{homeButton}}">
<view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_home">
<view
bindtap="home"
class="weui-navigation-bar__btn_home_wrapper"
hover-class="weui-active"
aria-role="button"
aria-label="首页"
>
<view class="weui-navigation-bar__button weui-navigation-bar__btn_home"></view>
</view>
</view>
</block>
</block>
<block wx:else>
<slot name="left"></slot>
</block>
</view>
<!-- 标题 -->
<view class='weui-navigation-bar__center'>
<view wx:if="{{loading}}" class="weui-navigation-bar__loading" aria-role="alert">
<view
class="weui-loading"
aria-role="img"
aria-label="加载中"
></view>
</view>
<block wx:if="{{title}}">
<text>{{title}}</text>
</block>
<block wx:else>
<slot name="center"></slot>
</block>
</view>
<!-- 右侧留空 -->
<view class='weui-navigation-bar__right'>
<slot name="right"></slot>
</view>
</view>
</view>

@ -0,0 +1,96 @@
.weui-navigation-bar {
--weui-FG-0:rgba(0,0,0,.9);
--height: 44px;
--left: 16px;
}
.weui-navigation-bar .android {
--height: 48px;
}
.weui-navigation-bar {
overflow: hidden;
color: var(--weui-FG-0);
flex: none;
}
.weui-navigation-bar__inner {
position: relative;
top: 0;
left: 0;
height: calc(var(--height) + env(safe-area-inset-top));
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding-top: env(safe-area-inset-top);
width: 100%;
box-sizing: border-box;
}
.weui-navigation-bar__left {
position: relative;
padding-left: var(--left);
display: flex;
flex-direction: row;
align-items: flex-start;
height: 100%;
box-sizing: border-box;
}
.weui-navigation-bar__btn_goback_wrapper {
padding: 11px 18px 11px 16px;
margin: -11px -18px -11px -16px;
}
.weui-navigation-bar__btn_goback_wrapper.weui-active {
opacity: 0.5;
}
.weui-navigation-bar__btn_goback {
font-size: 12px;
width: 12px;
height: 24px;
-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
-webkit-mask-size: cover;
mask-size: cover;
background-color: var(--weui-FG-0);
}
.weui-navigation-bar__center {
font-size: 17px;
text-align: center;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-weight: bold;
flex: 1;
height: 100%;
}
.weui-navigation-bar__loading {
margin-right: 4px;
align-items: center;
}
.weui-loading {
font-size: 16px;
width: 16px;
height: 16px;
display: block;
background: transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
background-size: 100%;
margin-left: 0;
animation: loading linear infinite 1s;
}
@keyframes loading {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

Binary file not shown.

@ -0,0 +1,417 @@
const db = wx.cloud.database({
env: 'software-9g3qgled9f6190ea'
})
Page({
data: {
randomRecord: null ,// 用来存储随机抽取的整个记录
xuenum: 0,
add:0,
},
// 生命周期函数--监听页面加载
onLoad: function() {
this.getRandomRecord();
},
getRandomRecord: function() {
const db = wx.cloud.database();
const _ = db.command;
let records = []; // 存储所有获取到的记录
const pageSize = 20; // 每页的记录数
let pageOffset = 0; // 当前页的偏移量
const maxRecords = 1000; // 最大获取记录数
// 分页获取记录的函数
const fetchPageOfRecords = (offset, size) => {
db.collection('users')
skip(offset)
limit(size)
get({
success: res => {
if (res.data.length > 0) {
records = records.concat(res.data); // 将新获取的记录添加到records数组中
if (records.length < maxRecords) {
pageOffset += pageSize; // 更新偏移量,准备获取下一页
fetchPageOfRecords(pageOffset, pageSize); // 递归调用以获取下一页的记录
} else {
// 当获取到足够的记录后处理records数组
processRecords();
}
} else {
console.log('没有更多的记录');
processRecords(); // 如果没有更多的记录处理已有的records数组
}
},
fail: err => {
console.error('查询失败', err);
}
});
};
// 处理记录的函数
const processRecords = () => {
if (records.length === 0) {
console.log('没有找到记录');
return;
}
// 计算权重并选择记录
const weightedRecords = this.calculateWeights(records);
const randomRecord = this.selectRecordByWeight(weightedRecords);
const xuenum = randomRecord.num;
// 更新数据库中的记录,并添加当前服务器时间戳
db.collection('users').doc(randomRecord._id).update({
data: {
timestamp: _.set(db.serverDate()) // 设置当前服务器时间
},
success: updateRes => {
console.log('记录更新成功,时间戳添加');
this.ifonlie();
},
fail: updateErr => {
console.error('记录更新失败', updateErr);
}
});
// 更新页面data对象中的randomRecord变量
this.setData({
randomRecord: randomRecord,
xuenum: xuenum
});
console.log('随机记录:', randomRecord);
};
// 开始分页查询
fetchPageOfRecords(pageOffset, pageSize);
},
calculateWeights: function(records) {
return records.map(record => {
// 假设权重是分数的倒数,分数越高,权重越低
const weight = 1 / (record.score || 1); // 防止除以0
return { record, weight };
});
},
selectRecordByWeight: function(weightedRecords) {
let cumulativeWeight = 0;
weightedRecords.forEach(item => {
cumulativeWeight += item.weight;
});
if (cumulativeWeight === 0) return null; // 防止除以0
const randomValue = Math.random() * cumulativeWeight;
let currentWeight = 0;
for (let i = 0; i < weightedRecords.length; i++) {
currentWeight += weightedRecords[i].weight;
if (currentWeight >= randomValue) {
return weightedRecords[i].record;
}
}
return null; // 默认返回null理论上不应该执行到这里
},
ifonlie:function(){
db.collection('user_ol').where({
num:this.data.xuenum
}).get({
success: res => {
// 查询成功
this.addcount();
if (res.data.length > 0) {
// 如果查询到数据
wx.showToast({
title: '学生在线',
icon: 'success',
duration: 2000
});
} else {
// 如果没有查询到数据
wx.showToast({
title: '学生缺勤',
icon: 'none',
duration: 2000
});
}
},
})
},
addcount: function() {
const that = this; // 保存当前上下文
const db = wx.cloud.database(); // 获取数据库引用
const xuenum = this.data.xuenum; // 从data对象中获取xuenum
// 查询 user_ol 集合中特定学号的记录
db.collection('user_ol').where({
num: xuenum
}).get({
success: function(res) {
// 查询成功,处理结果
if (res.data.length > 0) {
// 获取记录的 _id 和 count 属性
const recordId = res.data[0]._id;
const currentCount = res.data[0].count || 0;
// 如果 count 是 0则更新 users 集合中的 score 并增加 user_ol 集合中的 count
let scoreUpdatePromise;
if (currentCount >= 0) {
// 更新 users 集合中的 score
scoreUpdatePromise = db.collection('users').where({
num: xuenum
}).update({
data: {
score: that.data.randomRecord.score + 1 // 将 score 属性加1
}
});
} else {
scoreUpdatePromise = Promise.resolve(); // 如果不需要更新 score使用空的 Promise
}
scoreUpdatePromise.then(() => {
// 更新 user_ol 集合中的 count
return db.collection('user_ol').doc(recordId).update({
data: {
count: currentCount + 1 // 将 count 属性加1
}
});
}).then(updateRes => {
// 更新成功
console.log('更新成功', updateRes);
}).catch(updateErr => {
// 更新失败
console.error('更新失败', updateErr);
});
}
}
});
},
gotoindex5()
{
wx.navigateTo({
url: '/pages/index5/index5' // 确保路径正确
})
},
inputChange: function(e) {
this.setData({
add: e.detail.value
});
},
queryUser: function() {
const that = this; // 保存当前上下文
const db = wx.cloud.database(); // 获取数据库引用
const xuenum = this.data.xuenum; // 从data对象中获取xuenum
const add = this.data.add;
// 查询特定学号的记录
db.collection('user_ol').where({
num: xuenum
}).get({
success: function(res) {
// 查询成功,处理结果
if (res.data.length > 0) {
// 获取记录的 count 属性,如果没有则默认为 0
const count = res.data[0].count || 0;
const temp = that.data.randomRecord.score;
// 计算新的 score 值
const newScore = parseFloat(add) * (0.9+ 0.1* count ) + temp;
console.log('成绩',newScore);
// 更新记录的 score
db.collection('users').where({
num: xuenum
}).update({
data: {
score: newScore
},
success: function(updateRes) {
// 更新成功
console.log('更新成功', updateRes);
wx.showToast({
title: '分数更新成功',
icon: 'success',
duration: 2000
});
},
fail: function(updateErr) {
// 更新失败
console.error('更新失败', updateErr);
wx.showToast({
title: '更新失败,请重试',
icon: 'none',
duration: 2000
});
}
});
} else {
// 如果没有查询到数据
wx.showToast({
title: '未找到对应的记录',
icon: 'none',
duration: 2000
});
}
},
fail: function(err) {
// 查询失败
console.error('查询失败', err);
wx.showToast({
title: '查询失败,请重试',
icon: 'none',
duration: 2000
});
}
});
},
decreaseScore: function() {
const that = this;
const db = wx.cloud.database();
const xuenum = this.data.xuenum; // 从data对象中获取xuenum
if (xuenum === 0) {
wx.showToast({
title: '学号未设置',
icon: 'none',
duration: 2000
});
return;
}
// 查询 user_ol 集合中特定学号的记录
db.collection('users').where({
num: xuenum
}).get({
success: function(res) {
if (res.data.length > 0) {
const record = res.data[0];
if (record.score > 0) { // 确保 score 大于 0 才进行减操作
// 更新 users 集合中的 score
db.collection('users').doc(record._id).update({
data: {
score: db.command.inc(-1) // 将 score 属性减1
},
success: function(updateRes) {
// 更新成功
console.log('分数减少成功', updateRes);
wx.showToast({
title: '分数减少1',
icon: 'success',
duration: 2000
});
},
fail: function(updateErr) {
// 更新失败
console.error('分数减少失败', updateErr);
wx.showToast({
title: '分数减少失败,请重试',
icon: 'none',
duration: 2000
});
}
});
} else {
wx.showToast({
title: '分数不能为负',
icon: 'none',
duration: 2000
});
}
} else {
wx.showToast({
title: '未找到对应的记录',
icon: 'none',
duration: 2000
});
}
},
fail: function(err) {
console.error('查询失败', err);
wx.showToast({
title: '查询失败,请重试',
icon: 'none',
duration: 2000
});
}
});
},
addScore: function() {
const that = this;
const db = wx.cloud.database();
const xuenum = this.data.xuenum; // 从data对象中获取xuenum
if (xuenum === 0) {
wx.showToast({
title: '学号未设置',
icon: 'none',
duration: 2000
});
return;
}
// 查询 user_ol 集合中特定学号的记录
db.collection('users').where({
num: xuenum
}).get({
success: function(res) {
if (res.data.length > 0) {
const record = res.data[0];
if (record.score > 0) { // 确保 score 大于 0 才进行减操作
// 更新 users 集合中的 score
db.collection('users').doc(record._id).update({
data: {
score: db.command.inc(0.5) // 将 score 属性减1
},
success: function(updateRes) {
// 更新成功
console.log('分数减少成功', updateRes);
wx.showToast({
title: '分数增加0.5',
icon: 'success',
duration: 2000
});
},
fail: function(updateErr) {
// 更新失败
console.error('分数减少失败', updateErr);
wx.showToast({
title: '分数减少失败,请重试',
icon: 'none',
duration: 2000
});
}
});
} else {
wx.showToast({
title: '分数不能为负',
icon: 'none',
duration: 2000
});
}
} else {
wx.showToast({
title: '未找到对应的记录',
icon: 'none',
duration: 2000
});
}
},
fail: function(err) {
console.error('查询失败', err);
wx.showToast({
title: '查询失败,请重试',
icon: 'none',
duration: 2000
});
}
});
}
});

@ -0,0 +1,5 @@
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
}
}

@ -0,0 +1,17 @@
<view class="container">
<button class="data-button" bindtap="showData">
<view>名称:{{randomRecord.name}}</view>
<view>学号:{{randomRecord.num}}</view>
<view>分数:{{randomRecord.score}}</view>
</button>
<view class="t-login">
<form class="cl">
<view class="t-a">
<input type="number"placeholder="请输入分数" maxlength="11" bindinput="inputChange" />
</view>
<button bindtap="queryUser">打 分</button>
<button bindtap="decreaseScore">不能复述</button>
<button bindtap="addScore">可以复述</button>
</form>
</view>
</view>

@ -0,0 +1,78 @@
.data-button
{
padding: 10px;
display:block;
background-color:skyblue; /* 按钮背景颜色 */
border: none; /* 无边框 */
width: 150%; /* 按钮宽度 */
text-align: left; /* 文本左对齐 */
cursor: default; /* 将鼠标指针设置为默认,因为这是一个显示数据的按钮 */
}
.back
{
background-color: skyblue;
border: none;
border-radius: 12px;
color:white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 100px 2px;
cursor: pointer;
transition-duration: 0.4s;
-webkit-transition-duration: 0.4s;
}
.container
{
background-image: url('http://cdnjson.com/images/2024/09/26/change.jpg');
height: 100vh;
background-size: cover;
background-position: center;
}
.t-login {
width: 600rpx;
padding: 55rpx;
margin: 0 auto;
font-size: 28rpx;
background-color: #ffffff;
border-radius: 20rpx;
position: relative;
margin-top: -100rpx;
box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.15);
z-index: 9;
}
.t-login button {
font-size: 38rpx;
background: linear-gradient(to right, #02AAB0 0%, #00CDAC 51%, #02AAB0 100%);
color: #fff;
height: 120rpx;
line-height: 90rpx;
border-radius: 50rpx;
}
.t-login input {
padding: 0 20rpx 0 120rpx;
height: 90rpx;
line-height: 90rpx;
margin-bottom: 50rpx;
background: #f6f6f6;
border: 1px solid #f6f6f6;
font-size: 28rpx;
border-radius: 50rpx;
}
.t-login .t-a {
position: relative;
}
.t-login .t-a image {
width: 40rpx;
height: 40rpx;
position: absolute;
left: 40rpx;
top: 28rpx;
}

@ -0,0 +1,107 @@
const app = getApp();
Page({
data: {
latestRecord: null, // 使用null初始化
comment: '',
comments: [],
hasMoreComments: true, // 是否还有更多评论
},
onLoad: function() {
this.loadMoreComments();
},
bindCommentInput: function(e) {
// 绑定输入框的输入事件
this.setData({
comment: e.detail.value
});
},
clickBtn: function() {
this.loadMoreComments();
},
submitComment: function() {
// 提交评论的逻辑
const db = wx.cloud.database();
const _ = db.command;
if (this.data.comment.trim() === '') {
wx.showToast({
title: '评论不能为空',
icon: 'none'
});
return;
}
// 添加评论到数据库
db.collection('comments').add({
data: {
content: this.data.comment,
createTime: db.serverDate(), // 设置当前服务器时间
name: app.globalData.myname
},
success: res => {
console.log('评论添加成功', res);
wx.showToast({
title: '评论成功',
icon: 'success'
});
// 清空输入框
this.setData({
comment: ''
});
// 重新加载评论
this.loadMoreComments();
},
fail: err => {
console.error('评论添加失败', err);
wx.showToast({
title: '评论失败',
icon: 'none'
});
}
});
},
loadMoreComments: function() {
const db = wx.cloud.database();
let that = this;
let pageSize = 20; // 每页数据量
let page = 0; // 当前页码
let allComments = this.data.comments; // 存储所有评论
function getData() {
db.collection('comments').orderBy('createTime', 'desc').skip(page * pageSize).limit(pageSize).get({
success: res => {
console.log('评论', res.data);
if (res.data.length > 0) {
allComments = allComments.concat(res.data); // 将新获取的评论添加到数组中
that.setData({
comments: allComments
});
page++;
if (res.data.length < pageSize) {
// 如果返回的数据少于pageSize说明已经获取完所有评论
that.setData({
hasMoreComments: false
});
}
} else {
console.log('没有查询到更多评论');
that.setData({
hasMoreComments: false
});
}
},
fail: err => {
console.error('查询失败:', err);
}
});
}
getData(); // 调用函数开始获取评论
}
});

@ -0,0 +1,5 @@
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
}
}

@ -0,0 +1,20 @@
<view class="all">
<button bind:tap="clickBtn" style="height: 50px;width:100px;"class="container">刷新</button>
<view class="comment_text">
<text class="text-ti">K班评论</text>
<scroll-view scroll-y="true" class="comment-list">
<view class="comment-item" wx:for="{{comments}}" wx:key="unique">
<text>姓名:{{item.name}}</text>
<text>评论:{{item.content}}</text>
</view>
</scroll-view>
</view>
<view class="t-login">
<form class="cl">
<view class="t-a">
<input type="text"placeholder="请发表你的评论" maxlength="11" bindinput="bindCommentInput" />
</view>
<button bindtap="submitComment">评 论</button>
</form>
</view>
</view>

@ -0,0 +1,94 @@
.container{
top: 90px;
left: 150px;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
text-align: center;
background-color: #00CDAC;
}
.container:hover {
background-color: #1795bb;
}
.container:active{
background-color: #1795bb;
box-shadow: 0 5px #666;
transform:translateY(4px);
}
.all
{
background-image: url('http://cdnjson.com/images/2024/09/27/comment.jpg');
height: 100vh;
background-size: cover;
background-position: center;
}
.t-login {
width: 600rpx;
padding: 55rpx;
margin: 0 auto;
font-size: 28rpx;
background-color: #ffffff;
border-radius: 20rpx;
position: relative;
margin-top: 300rpx;
box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.15);
z-index: 9;
}
.t-login button {
font-size: 38rpx;
background: linear-gradient(to right, #02AAB0 0%, #00CDAC 51%, #02AAB0 100%);
color: #fff;
height: 120rpx;
line-height: 90rpx;
border-radius: 50rpx;
}
.t-login input {
padding: 0 20rpx 0 120rpx;
height: 90rpx;
line-height: 90rpx;
margin-bottom: 50rpx;
background: #f6f6f6;
border: 1px solid #f6f6f6;
font-size: 28rpx;
border-radius: 50rpx;
}
.t-login .t-a {
position: relative;
}
.t-login .t-a image {
width: 40rpx;
height: 40rpx;
position: absolute;
left: 40rpx;
top: 28rpx;
}
.comment_text {
display: flex;
height: 280px;
width: 280px;
border: 3rpx ;
border-radius: 10rpx;
margin-top: 200rpx;
}
.text-ti {
position: absolute;
font-size: 12px;
background: white;
margin: -10px 0 0 10px;
padding: 0px 5px;
color: rgb(144, 147, 167);
}
.comment-item text {
position: relative;
margin-right: 20rpx;
text-align: auto;
top: 20px;
left: 10px;
font-size: 25rpx;
font-weight: bold;
border-bottom: 1px dotted rgb(255, 0, 98);
display: inline-block;
}

@ -0,0 +1,66 @@
// pages/demo1/demo1.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

@ -0,0 +1,2 @@
<!--pages/demo1/demo1.wxml-->
<text>pages/demo1/demo1.wxml</text>

@ -0,0 +1 @@
/* pages/demo1/demo1.wxss */

@ -0,0 +1,105 @@
// pages/login/login.js
const app = getApp();
Page({
data: {
id: '', // 学号
name: '' // 姓名
},
bindidInput(e) {
this.setData({
id: e.detail.value
});
},
bindnameInput(e) {
this.setData({
name: e.detail.value
});
},
login() {
var that = this;
// 假设正确的学号和姓名
const correctId = '33210';
const correctName = '33210';
if (!that.data.id) {
wx.showToast({ title: '请输入学号', icon: 'none' });
return;
}
if (!that.data.name) {
wx.showToast({ title: '请输入姓名', icon: 'none' });
return;
}
// 验证学号和姓名是否正确
if (that.data.id === correctId && that.data.name === correctName) {
wx.showToast({ title: '登录成功!', icon: 'success' });
wx.navigateTo({
url: '/pages/index2/index2' // 确保路径正确
});
} else {
const app = getApp();
let db = wx.cloud.database(); // 设置数据库
let user_ol = db.collection('user_ol');
let users = db.collection('users');
let num = parseInt(that.data.id, 10);
app.globalData.myname = that.data.name;
app.globalData.mynum = num;
users.where({
name: app.globalData.myname,
num: app.globalData.mynum
}).get({
success: res => {
if (res.data.length > 0) {
// 如果查询到数据
that.addtemp(); // 确保这里使用 that 调用 addtemp
wx.showToast({
title: '登陆成功',
icon: 'success',
duration: 2000
});
} else {
// 如果没有查询到数据
wx.showToast({
title: '您不在学生名单上',
icon: 'none',
duration: 2000
});
}
},
fail: err => {
console.error('查询失败', err);
wx.showToast({
title: '查询失败,请重试',
icon: 'none',
duration: 2000
});
}
});
}
},
addtemp() {
const that = this; // 保存当前上下文
const user_ol = wx.cloud.database().collection('user_ol');
const num = parseInt(that.data.id, 10); // 确保这里重新获取 num
user_ol.add({
data: {
num: num,
name: that.data.name,
count: 0,
}
}).then(res => {
console.log('添加成功', res);
wx.navigateTo({
url: '/pages/stu_client/stu_client' // 确保路径正确
});
}).catch(err => {
console.log('添加失败', err); // 失败提示错误信息
});
},
forgotPwd() {
wx.showToast({ title: '忘记信息', icon: 'none' });
},
});

@ -0,0 +1,5 @@
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
}
}

@ -0,0 +1,25 @@
<!--pages/login/login.wxml-->
<view class="login-bg">
<image class="img-a" src="https://zhoukaiwen.com/img/loginImg/bg1.png"></image>
<image class="logo" src="http://cdnjson.com/images/2024/10/08/35521ea90f9dd7b5eb70563751db3f09.jpg"></image>
<view class="t-login">
<view class="t-b">登 录</view>
<form class="cl">
<view class="t-a">
<image src="https://zhoukaiwen.com/img/loginImg/user.png"></image>
<input type="number" name="phone" placeholder="请输入学号" maxlength="11" bindinput="bindidInput" />
</view>
<view class="t-a">
<image src="https://zhoukaiwen.com/img/loginImg/pwd.png"></image>
<input name="code" maxlength="6" placeholder="请输入姓名" bindinput="bindnameInput" />
</view>
<button bindtap="login">登 录</button>
</form>
</view>
<view class="cardBox">
<view>
联系我们2047481732@qq.com
</view>
</view>
<image class="img-b" src="https://zhoukaiwen.com/img/loginImg/bg2.png"></image>
</view>

@ -0,0 +1,143 @@
/* pages/login/login.wxss */
.logo {
display: block; /* 使margin:auto;生效 */
width: 200rpx;
height: 200rpx;
border-radius: 50%;
position: absolute;
top: 60px; /* 根据需要调整 */
left: 50%;
transform: translateX(-50%);
}
.img-a {
width: 100%;
}
.img-b {
width: 100%;
height: 45px;
bottom: 0;
position: absolute;
}
.login-bg {
height: 100vh;
background: linear-gradient(to bottom, #ff6a9a, #fe7d76);
position: relative;
}
.t-login {
width: 600rpx;
padding: 55rpx;
margin: 0 auto;
font-size: 28rpx;
background-color: #ffffff;
border-radius: 20rpx;
position: relative;
margin-top: -100rpx;
box-shadow: 0 5px 7px 0 rgba(0, 0, 0, 0.15);
z-index: 9;
}
.t-login button {
font-size: 38rpx;
background: linear-gradient(to right, #ff8f77, #fe519f);
color: #fff;
height: 120rpx;
line-height: 90rpx;
border-radius: 50rpx;
}
.t-login input {
padding: 0 20rpx 0 120rpx;
height: 90rpx;
line-height: 90rpx;
margin-bottom: 50rpx;
background: #f6f6f6;
border: 1px solid #f6f6f6;
font-size: 28rpx;
border-radius: 50rpx;
}
.t-login .t-a {
position: relative;
}
.t-login .t-a image {
width: 40rpx;
height: 40rpx;
position: absolute;
left: 40rpx;
top: 28rpx;
}
.t-login .t-b {
text-align: left;
font-size: 46rpx;
color: #ff939b;
font-weight: bold;
margin: 0 0 50rpx 20rpx;
}
.t-login .t-d {
text-align: center;
color: #999;
margin: 80rpx 0;
}
.t-login .t-c {
text-align: right;
color: #c0c0c0;
margin: -20rpx 30rpx 40rpx 0;
}
.t-login .t-f {
text-align: center;
margin: 200rpx 0 0 0;
color: #666;
}
.t-login .t-f text {
margin-left: 20rpx;
color: #aaaaaa;
font-size: 27rpx;
}
.t-login .uni-input-placeholder {
color: #aeaeae;
}
.cl {
zoom: 1;
}
.cl:after {
clear: both;
display: block;
visibility: hidden;
height: 0;
content: '\20';
}
.cardBox {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
padding: 5rpx;
background: #ffffff;
opacity: 0.9;
-webkit-border-radius: 20rpx;
border-radius: 0 0 20rpx 20rpx;
height: 70rpx;
width: 600rpx;
margin: 0 auto;
position: relative;
text-align: center;
line-height: 70rpx;
color: #aaa;
font-size: 28rpx;
}
.cardBox .txt {
margin-left: 10rpx;
}

@ -0,0 +1,27 @@
Page({
// 发起签到
startAttendance: function() {
// 这里可以添加发起签到的代码
wx.navigateTo({
url: '/pages/index5/index5'
});
},
// 管理学生
gotorank: function() {
// 这里可以添加管理学生的代码
wx.navigateTo({
url: '/pages/rankk/rankk'
});
},
gotostu: function() {
wx.navigateTo({
url: '/pages/upload_stu/upload_stu'
});
},
goBack: function() {
wx.navigateBack({
delta: 1 // 返回上一页面
});
}
});

@ -0,0 +1,5 @@
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
}
}

@ -0,0 +1,8 @@
<view class="login-bg">
<view class="container">
<button class="action-button1" bindtap="startAttendance">发起签到</button>
<button class="action-button2" bindtap="gotorank">查看排行榜</button>
<button class="action-button3" bindtap="gotostu">学生名单相关</button>
</view>
</view>

@ -0,0 +1,34 @@
.container {
display: flex;
flex-direction: column; /* 使子元素垂直排列 */
align-items: center; /* 子元素在容器中居中对齐 */
padding: 20px; /* 容器内边距 */
}
.action-button1{
margin: 100px 20px; /* 按钮上下外边距 */
padding: 20px; /* 按钮内边距 */
background:linear-gradient(#ccfbff, #ef96c5); /* 按钮背景颜色 */
color: white; /* 按钮文字颜色 */
border-radius: 5px; /* 按钮边框圆角 */
}
.action-button2{
margin: 100px 20px; /* 按钮上下外边距 */
padding: 20px; /* 按钮内边距 */
background: linear-gradient(to right, #ead6ee, #a0f1ea);
color: white; /* 按钮文字颜色 */
border-radius: 5px; /* 按钮边框圆角 */
}
.action-button3{
margin: 100px 20px; /* 按钮上下外边距 */
padding: 20px; /* 按钮内边距 */
background: linear-gradient(to bottom right, #eebd89, #d13abd);
color: white; /* 按钮文字颜色 */
border-radius: 5px; /* 按钮边框圆角 */
}
.login-bg {
background-image: url('http://cdnjson.com/images/2024/09/27/index_2.jpg');
height: 100vh;
background-size: cover;
background-position: center;
}

@ -0,0 +1,71 @@
// pages/index3/index3.js
const app = getApp();
Page({
data: {
latestRecord: null, // 使用null初始化
comment: '',
comments: []
},
onLoad: function() {
this.readLatestRecord();
},
clickBtn: function() {
this.readLatestRecord();
},
readLatestRecord: function() {
const db = wx.cloud.database(); // 获取数据库的引用
const users = db.collection('users'); // 获取users集合的引用
// 使用orderBy和limit方法来查询timestamp最新的记录
users.orderBy('timestamp', 'desc').limit(1).get({
success: res => {
// 查询成功,获取最新的记录
if (res.data.length > 0) {
const latestRecord = res.data[0];
// 将查询结果存储在页面数据中
this.setData({
latestRecord: latestRecord
});
console.log('最新的记录:', latestRecord);
} else {
console.log('没有查询到记录');
this.setData({
latestRecord: {
name: '暂时未开启点名'
}
});
}
},
fail: err => {
// 查询失败的处理逻辑
console.error('查询失败:', err);
}
});
},
loadComments: function() {
const db = wx.cloud.database();
// 按创建时间降序排序
db.collection('comments').orderBy('createTime', 'desc').get({
success: res => {
if (res.data.length > 0) {
this.setData({
comments: res.data
});
} else {
console.log('没有查询到评论');
}
},
fail: err => {
console.error('查询失败:', err);
}
});
}
});

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

@ -0,0 +1,14 @@
<view class="container">
<view wx:if="{{latestRecord}}" class="latest-record">
<text class="text-ti">K班</text>
<view class="people">
<text>学号: {{latestRecord.num}}</text>
<text>姓名: {{latestRecord.name}}</text>
<text>积分: {{latestRecord.score}}</text>
</view>
</view>
<view wx:else>
<text>暂时未开启点名</text>
</view>
<button bind:tap="clickBtn" class="action-button">刷新</button>
</view>

@ -0,0 +1,66 @@
.latest-record {
display: flex;
height: 100px;
width: 200px;
border: 3rpx solid #faca82;
border-radius: 10rpx;
}
.text-ti {
position: absolute;
font-size: 12px;
background: white;
margin: -10px 0 0 10px;
padding: 0px 5px;
color: rgb(144, 147, 167);
}
.people text {
position: relative;
display: block;
text-align: auto;
top: 20px;
left: 20px;
font-size: 35rpx;
font-weight: bold;
}
.container
{
background-image: url('http://cdnjson.com/images/2024/09/27/sure.jpg');
height: 100vh;
background-size: cover;
background-position: center;
}
.action-button{
position: relative;
background-color: rgb(118, 224, 32);
border: none;
font-size: 28px;
color: #ffffff;
padding: 20px;
width: 200px;
text-align: center;
transition-duration: 0.6s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.action-button::after{
content: '';
background:#53a4f0;
display: block;
position: absolute;
padding-top: 300%;
padding-left: 350%;
margin-left: -20px !important;
margin-top: -120%;
opacity: 0;
transition:all 0.8s;
}
.action-button:active::after{
padding: 0;
margin: 0;
opacity: 1;
transition: 0s;
}

@ -0,0 +1,66 @@
// pages/index4/index4.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})

@ -0,0 +1,3 @@
{
"usingComponents": {}
}

@ -0,0 +1,2 @@
<!--pages/index4/index4.wxml-->
<text>pages/index4/index4.wxml</text>

@ -0,0 +1 @@
/* pages/index4/index4.wxss */

@ -0,0 +1,18 @@
Page({
enterAttendance: function() {
wx.navigateTo({
url: '/pages/change/change'
});
},
gotoindex2: function() {
// 这里写跳转到 index2 页面的代码
wx.navigateTo({
url: '/pages/index2/index2' // 确保路径正确
});
},
goBack: function() {
wx.navigateBack({
delta: 1 // 返回上一页面
});
}
});

@ -0,0 +1,5 @@
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
}
}

@ -0,0 +1,9 @@
<view class="container">
<image class="placeholder" src="http://cdnjson.com/images/2024/09/25/index5.jpg" mode="aspectFit"></image>
<view>教师端</view>
<view class="button-container">
<button class="button" bindtap="enterAttendance">进入点名</button>
<button class="button" bindtap="gotoindex2">返回菜单栏</button>
</view>
</view>

@ -0,0 +1,55 @@
.container {
font-family: Arial, sans-serif;
text-align: center;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
height: 100vh;
background-color: #fff;
}
.placeholder {
width: 200px;
height: 120px;
background-color: #ddd;
display: flex;
align-items: center;
justify-content: center;
margin: 60px 0;
}
.button-container {
margin-top: 20px;
}
.button {
display: inline-block;
padding: 15px 25px;
font-size: 24px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color:#fff;
background-color: rgb(16, 185, 214);
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
.button:hover{
background-color: #1795bb;
}
.button:active{
background-color: #1795bb;
box-shadow: 0 5px #666;
transform:translateY(4px);
}
.container
{
background-image: url('http://cdnjson.com/images/2024/09/25/index_back.jpg');
height: 100vh;
background-size: cover;
background-position: center;
}

@ -0,0 +1,89 @@
// 定义页面数据模型
const db = wx.cloud.database({
env: 'software-9g3qgled9f6190ea'
})
const app = getApp();
Page({
data: {
records: [],
xuenum: '',
add:'',
randomRecord: null,
self: app.globalData.mynum
},
onLoad: function () {
this.clickBtn();
},
onShow: function () {
this.clickBtn();
},
onPullDownRefresh: function () { //下拉刷新
wx.stopPullDownRefresh();
this.clickBtn();
},
clickBtn() {
const that = this;
let pageSize = 20; // 每页数据量
let page = 0; // 当前页码
let allData = []; // 存储所有数据
function getData() {
db.collection('users').skip(page * pageSize).limit(pageSize).get({
success: function(res) {
console.log(res.data);
allData = allData.concat(res.data); // 将新获取的数据添加到数组中
that.setData({
records: allData
});
if (res.data.length < pageSize) {
// 如果返回的数据少于pageSize说明已经获取完所有数据
const sortedRecords = allData.sort(function(a, b) {
return b.score - a.score;
});
that.setData({
records: sortedRecords
});
} else {
// 否则,继续获取下一页数据
page++;
getData();
}
},
fail: function(err) {
console.error(err);
}
});
}
getData(); // 调用函数开始获取数据
},
inputChange: function(e) {
this.setData({
add: e.detail.value
});
},
queryUser: function(){
const xuenum = this.data.xuenum; // 从data对象中获取xuenum
const add = this.data.add
const temp = +this.data.randomRecord.score-add
db.collection('users').where({
num:xuenum
}).update({
data:{
score:temp
}
}).then(res => {
console.log('更新成功')
clickBtn();
}).catch(err => {
console.log('更新失败',err)
})
},
});

@ -0,0 +1,5 @@
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
}
}

@ -0,0 +1,27 @@
<view class="container">
<button bindtap="clickBtn" class="action-button">点击刷新排行榜</button>
<scroll-view scroll-y="true" class="scroll-view" style="height: 100%;">
<view wx:for="{{records}}" wx:key="item" class="rank_block">
<view class="rank-item">
<!--头像-->
<view class="rank-img">
<image src='https://tse3-mm.cn.bing.net/th/id/OIP-C.yMAeC3o1ZnVZYsQecLSlEAAAAA?rs=1&pid=ImgDetMain'></image>
</view>
<!--展示昵称,以及贡献值-->
<block>
<view class="rank-name">{{item.name}}</view>
<view class="rank-name">{{item.num}}</view>
<text wx:if="{{self == item.num}}">-----------------这是您---------------</text>
<view class="rank-price">积分:{{item.score}}分</view>
</block>
<!--排名-->
<view class="rank-uv">
<text wx:if="{{index >= 3}}">第 {{index + 1}} 名</text>
<image src="/images/rank{{index + 1}}.png" wx:if="{{index < 3}}" />
</view>
</view>
</view>
</scroll-view>
</view>

@ -0,0 +1,130 @@
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.rank-item {
height: 300rpx;
width: 750rpx;
background: #fff;
padding: 20rpx 20rpx 20rpx 50rpx;
box-sizing: border-box;
position: relative;
}
.rank-item .rank-img {
width: 100rpx;
height: 100rpx;
float: left;
margin-right: 50rpx;
position: relative;
}
.rank-item .rank-img image {
position: absolute;
border-radius: 50%;
width: 100rpx;
height: 100rpx;
top: 0;
left: 0;
}
.rank-item .rank-name {
font-size: 32rpx;
height: 50rpx;
line-height: 50rpx;
color: #4e5b65;
font-weight: bold;
}
.rank-item .rank-price {
height: 40rpx;
line-height: 40rpx;
margin-top: 10rpx;
font-size: 24rpx;
color: #d55a4a;
}
.rank-item .rank-uv text {
font-size: 38rpx;
position: absolute;
height: 100rpx;
line-height: 100rpx;
bottom: 20rpx;
right: 20rpx;
color: #777;
}
.rank-item .rank-uv image {
position: absolute;
width: 100rpx;
height: 100rpx;
bottom: 120rpx;
right: 20rpx;
}
.action-button {
position: relative;
width: 80%; /* 按钮宽度 */
padding: 10rpx; /* 按钮内边距 */
background-color: #C84B31;/* 按钮背景颜色 */
color: white; /* 按钮文字颜色 */
border-radius: 5rpx; /* 按钮边框圆角 */
}
.rank_block {
display: flex;
flex-direction: column;
align-items: center; /* 使子元素在交叉轴上居中 */
padding: 10px 0; /* 上下内边距 */
border-bottom: 1px solid #f0f0f0; /* 每个排行榜项的下边框,最后一个可以去掉 */
}
.rank_item {
width: 100%; /* 占满父容器的宽度 */
display: flex;
align-items: center; /* 使子元素在交叉轴上居中 */
margin-bottom: 10px; /* 每个排行榜项的下边距 */
}
.rank-img {
width: 50px; /* 头像宽度 */
height: 50px; /* 头像高度 */
border-radius: 50%; /* 圆形头像 */
overflow: hidden; /* 隐藏超出容器的部分 */
margin-right: 10px; /* 与文本的间距 */
}
.rank-img image {
width: 100%; /* 占满父容器的宽度 */
height: 100%; /* 占满父容器的高度 */
object-fit: cover; /* 裁剪并填充整个元素 */
}
.rank-name {
flex-grow: 1; /* 占据剩余空间 */
font-size: 16px; /* 字体大小 */
color: #333; /* 字体颜色 */
}
.rank-price {
font-size: 14px; /* 字体大小 */
color: #666; /* 字体颜色 */
}
.rank-uv {
display: flex;
align-items: center;
margin-top: 5px; /* 与上面元素的间距 */
}
.scroll-view {
height: 300px; /* 这里的高度可以根据你的页面布局进行调整 */
overflow-y: scroll; /* 允许垂直方向滚动 */
-webkit-overflow-scrolling: touch; /* 在iOS上启用原生滚动 */
margin-top: 10px; /* 根据需要添加上边距 */
padding: 10px; /* 内边距 */
border: 1px solid #ccc; /* 边框,可以根据需要调整 */
border-radius: 4px; /* 圆角边框 */
background-color: #fff; /* 背景颜色 */
}

@ -0,0 +1,21 @@
// pages/index/index.js
Page({
gotocomment()
{
wx.navigateTo({
url: '/pages/comment/comment' // 确保路径正确
});
},
gotorank()
{
wx.navigateTo({
url: '/pages/rankk/rankk' // 确保路径正确
});
},
gotoindex3()
{
wx.navigateTo({
url: '/pages/index3/index3' // 确保路径正确
});
}
})

@ -0,0 +1,5 @@
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
}
}

@ -0,0 +1,5 @@
<view class="container">
<button bindtap="gotocomment" class="btn-top">评论 / 质疑</button>
<button bindtap="gotoindex3" class="btn-left">目前点到的人</button>
<button bindtap="gotorank" class="btn-right">查看排行榜</button>
</view>

@ -0,0 +1,54 @@
button {
padding: 80px; /* 按钮的厚度 */
border-radius: 70%; /* 将按钮变成圆形 */
color: white;
font-size: 16px;
cursor: pointer;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
outline: none; /* 移除焦点时的轮廓线 */
}
button{
display: flex;
align-items: center;
justify-content: center;
}
/* 根据按钮内文字或图标的大小调整padding */
.btn-top {
background-color: palegoldenrod;
width: 10px; /* 按钮的宽度 */
height: 10px; /* 按钮的高度 */
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
}
.btn-left {
background-color:salmon;
width: 10px;
height: 10px;
position: absolute;
top: 50%;
left: 1%;
transform: translateY(-50%);
}
.btn-right {
background-color:lightpink;
width: 10px;
height: 10px;
position: absolute;
top: 50%;
right: 1%;
transform: translateY(-50%);
}
.container
{
background-image: url(' http://cdnjson.com/images/2024/09/27/index3.jpg');
height: 100vh;
background-size: cover;
background-position: center;
}

@ -0,0 +1,85 @@
Page({
clickBtn(){
let that = this
wx.chooseMessageFile({
count: 1,
type: 'file',
success:res=>{
wx.showLoading({
title: '正在上传',
})
let filePath=res.tempFiles[0].path;
console.log("选择execl成功",filePath)
that.clearDatabase();
that.cloudFile(filePath);
}
})
},
clearDatabase() {
const db = wx.cloud.database({
env:'software-9g3qgled9f6190ea'
});
const stu = db.collection('users'); // 替换为你的集合名称
stu.where({
_id: db.command.exists(true)
}).remove().then(res=>{
console.log('删除成功')
this.setData({
number:''
})
}).catch(err => {
console.log('删除失败',err)//失败提示错误信息
})
},
cloudFile(path){
let that = this
wx.cloud.uploadFile({
cloudPath:"stu/test.xlsx",
filePath: path,
success: res=>{
wx.hideLoading()
console.log("上传成功",res.fileID)
that.jiexi(res.fileID)
},
fail: err=>{
console.log("上传失败",err)
}
})
},
jiexi(fileId){
wx.cloud.callFunction({
name:"excel",
data:{
fileID: fileId
},
success(res) {
console.log("success",res)
} ,
fail(res)
{
console.log("failed",res)
}
})
},
clickBtn2(){
wx.downloadFile({
url:"https://736f-software-9g3qgled9f6190ea-1329643751.tcb.qcloud.la/stu/test.xlsx?sign=db95dcc9da0c7a414610887585aabbc5&t=1727246704",
success:res=>{
var filePath=res. tempFilePath
this.opfile(filePath)
}
})
},
opfile(path){
wx.openDocument({
filePath:path,
fileType:"xlsx"
}).then(res=>{
console.log(res)
})
}
});

@ -0,0 +1,5 @@
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
}
}

@ -0,0 +1,5 @@
<!--pages/up_stu/up_stu.wxml-->
<view class="btn-container">
<button bindtap="clickBtn" class="action-button1">上传学生名单</button>
<button bindtap="clickBtn2" class="action-button2">查看学生名单</button>
</view>

@ -0,0 +1,28 @@
.btn-container {
display: flex;
justify-content: space-between; /* 子元素分散对齐 */
align-items: center; /* 子元素垂直居中 */
width: 100%; /* 确保容器宽度为屏幕宽度 */
padding: 10px 0; /* 上下padding确保按钮不会紧贴屏幕顶部 */
}
.action-button1
{
background-image: linear-gradient(to right, #3CA55C 0%, #B5AC49 51%, #3CA55C 100%);
padding: 20px;
}
.action-button2
{
background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
padding: 20px;
}
.btn-container
{
background-image: url('http://cdnjson.com/images/2024/09/25/v2-5ef7fc1a25366518a65e3066fd465300_r.jpg');
height: 100vh;
background-size: cover;
background-position: center;
}

@ -0,0 +1,30 @@
{
"appid": "wxef6910a89c23b59e",
"compileType": "miniprogram",
"libVersion": "3.5.8",
"packOptions": {
"ignore": [],
"include": []
},
"setting": {
"packNpmManually": true,
"coverView": true,
"es6": true,
"postcss": true,
"minified": true,
"enhance": true,
"showShadowRootInWxmlPanel": true,
"packNpmRelationList": [],
"babelSetting": {
"ignore": [],
"disablePlugins": [],
"outputPath": ""
}
},
"condition": {},
"editorSetting": {
"tabIndent": "insertSpaces",
"tabSize": 4
},
"simulatorPluginLibVersion": {}
}

@ -0,0 +1,84 @@
{
"description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
"projectname": "%E6%9C%80%E7%BB%88%E7%89%88",
"setting": {
"compileHotReLoad": true,
"skylineRenderEnable": false
},
"condition": {
"miniprogram": {
"list": [
{
"name": "pages/stu_client/stu_client",
"pathName": "pages/stu_client/stu_client",
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "pages/index3/index3",
"pathName": "pages/index3/index3",
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "pages/index/index",
"pathName": "pages/index/index",
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/change/change",
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "pages/upload_stu/upload_stu",
"pathName": "pages/upload_stu/upload_stu",
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "pages/rankk/rankk",
"pathName": "pages/rankk/rankk",
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "pages/index2/index2",
"pathName": "pages/index2/index2",
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/index1/index1",
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "pages/index4/index4",
"pathName": "pages/index4/index4",
"query": "",
"launchMode": "default",
"scene": null
},
{
"name": "",
"pathName": "pages/index5/index5",
"query": "",
"launchMode": "default",
"scene": null
}
]
}
}
}

@ -0,0 +1,7 @@
{
"desc": "关于本文件的更多信息,请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
"rules": [{
"action": "allow",
"page": "*"
}]
}

@ -0,0 +1,539 @@
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时,垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path stroke viewBox IE
normalize.css */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}

@ -0,0 +1,211 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
<style>
.main .logo {
margin-top: 0;
height: auto;
}
.main .logo a {
display: flex;
align-items: center;
}
.main .logo .sub-title {
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4692956" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe65a;</span>
<div class="name">长箭头-copy-copy</div>
<div class="code-name">&amp;#xe65a;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
<ul>
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
<li>默认情况下不支持多色,直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意:新版 iconfont 支持两种方式引用多色图标SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)</p>
</blockquote>
<p>Unicode 使用步骤如下:</p>
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1727097835318') format('woff2'),
url('iconfont.woff?t=1727097835318') format('woff'),
url('iconfont.ttf?t=1727097835318') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-arrdown-copy"></span>
<div class="name">
长箭头-copy-copy
</div>
<div class="code-name">.icon-arrdown-copy
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
<p>与 Unicode 使用方式相比,具有如下特点:</p>
<ul>
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-arrdown-copy"></use>
</svg>
<div class="name">长箭头-copy-copy</div>
<div class="code-name">#icon-arrdown-copy</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
<ul>
<li>支持多色图标了,不再受单色限制。</li>
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差,支持 IE9+,及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>

@ -0,0 +1 @@
window._iconfont_svg_string_4692956='<svg><symbol id="icon-arrdown-copy" viewBox="0 0 1024 1024"><path d="M512 576.00000001l0-128.00000002 458.68799999 1e-8c29.44 0 53.312 23.872 53.31200001 53.312l0 21.376A53.312 53.312 0 0 1 970.68799999 576L512 576.00000001z" fill="#B0BEC5" ></path><path d="M430.72 781.824l-358.08-220.8a53.312 53.312 0 0 1-0.576-90.432l358.08-226.752A53.312 53.312 0 0 1 512 288.896L512 736.44799999a53.312 53.312 0 0 1-81.28 45.44000002z" fill="#B0BEC5" ></path></symbol></svg>',(n=>{var t=(e=(e=document.getElementsByTagName("script"))[e.length-1]).getAttribute("data-injectcss"),e=e.getAttribute("data-disable-injectsvg");if(!e){var o,i,d,c,a,l=function(t,e){e.parentNode.insertBefore(t,e)};if(t&&!n.__iconfont__svg__cssinject__){n.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(t){console&&console.log(t)}}o=function(){var t,e=document.createElement("div");e.innerHTML=n._iconfont_svg_string_4692956,(e=e.getElementsByTagName("svg")[0])&&(e.setAttribute("aria-hidden","true"),e.style.position="absolute",e.style.width=0,e.style.height=0,e.style.overflow="hidden",e=e,(t=document.body).firstChild?l(e,t.firstChild):t.appendChild(e))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(d=o,c=n.document,a=!1,r(),c.onreadystatechange=function(){"complete"==c.readyState&&(c.onreadystatechange=null,s())})}function s(){a||(a=!0,d())}function r(){try{c.documentElement.doScroll("left")}catch(t){return void setTimeout(r,50)}s()}})(window);

@ -0,0 +1,16 @@
{
"id": "4692956",
"name": "no name",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "38645607",
"name": "长箭头-copy-copy",
"font_class": "arrdown-copy",
"unicode": "e65a",
"unicode_decimal": 58970
}
]
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

@ -0,0 +1,26 @@
.iconfont {
font-family: "iconfont" !important;
font-size: 20px;
font-style: normal;
width: 10px; /* 设置按钮宽度 */
height: 40px; /* 设置按钮高度 */
padding-left: 150px;/*按钮大小*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.iconfont {
position: relative; /* 相对于其正常位置进行定位 */
right: 240px; /* 向左移动图标 */
top: 40px; /* 向下移动图标 */
}
.icon-arrdown-copy:before {
content: "\e65a";
}
@font-face {
font-family: 'iconfont'; /* Project id 4692956 */
src: url('//at.alicdn.com/t/c/font_4692956_lc5fjtas54.woff2?t=1727098445449') format('woff2'),
url('//at.alicdn.com/t/c/font_4692956_lc5fjtas54.woff?t=1727098445449') format('woff'),
url('//at.alicdn.com/t/c/font_4692956_lc5fjtas54.ttf?t=1727098445449') format('truetype');
}
Loading…
Cancel
Save